it-swarm.dev

"تفقد" عنصر تحوم؟

ملاحظة: لقد قرأت خيوط متشابهة ، لكن لا يوجد مشكلتي - يمكنني النقر عليها بشكل جيد ، ثم تختفي.

أجد أن "Inspect Element" أداة لا تقدر بثمن في Chrome ، إلا أن آخر غزواتي عندما تعلمت الطرق السحرية التي يمتلكها كثيرون منكم بالفعل قد رأتني في إنشاء قائمة فرعية لعنصر في شريط التنقل الخاص بي ، والذي ينبثق أدناه عند المرور به العنصر الرئيسي.

لا يتم تصميم الإطار المنبثق (أو أسفله) تمامًا بالطريقة التي أرغب بها ، لذلك انقر بزر الماوس الأيمن فوق> فحص العنصر لمعرفة ما يأتي من أين بالضبط ، والحصول على فكرة أفضل عن كيفية تحقيق التأثير المطلوب.

ومع ذلك ، بمجرد نقل الماوس بعيدًا عن القائمة ، فقد رحل.

لذلك لا يمكنني تحديد عناصر مختلفة في جزء الاستقصاء ، ومعرفة المنطقة التي يتم تمييزها في نفس الوقت.

هل هناك طريقة للتغلب على هذا ، دون تغيير القائمة بحيث تبقى "برزت" بمجرد تفعيلها؟

73
OJFord

إذا تم تشغيل التحويم بواسطة JS ، فما عليك سوى إيقاف تنفيذ البرنامج النصي مؤقتًا عبر لوحة المفاتيح. هذه طريقة أبسط طريقة لتجميد DOM مما تشير إليه الإجابات الأخرى.

إليك كيفية القيام بذلك في Chrome. أنا متأكد من أن Firefox لديه إجراء مكافئ:

  1. افتح أدوات المطور وانتقل إلى المصادر.
  2. لاحظ الاختصار لإيقاف تنفيذ البرنامج النصي -F8.

    Pause script execution

  3. تفاعل مع واجهة المستخدم لإظهار العنصر.

  4. نجاح F8.
  5. يمكنك الآن تحريك الماوس ، وفحص DOM ، أيا كان. العنصر سيبقى هناك.
95
mxxk

ما نجح بالنسبة لي هو اختيار علامة محددة أردت فحصها والقيام بذلك:

enter image description here

بعد القيام بما سبق ، سأحدد مرة أخرى عادةً أن علامة ما ستبقى القائمة المنسدلة تلقائيًا كما هي ، حتى عندما أقوم بتمرير الماوس إلى أماكن أخرى مثل Inspect Element ، إلخ.

يمكنك فقط تحديث المتصفح عند القيام بفحص عناصر القائمة المنسدلة للعودة إلى الحالة الطبيعية.

أتمنى أن يساعدك هذا. :)

25
Woppi

يمكنك أيضًا القيام بذلك في وحدة جافا سكريبت:

$('#foo').trigger('mouseover');

وهذا "سيجمد" العنصر في حالة "التحويم".

12
pixelearth

إليك كيفية القيام بذلك دون أي تغييرات في CSS أو توقف JS مؤقتًا في Chrome (أنا على جهاز Mac ولا أمتلك جهاز كمبيوتر أمامي إذا كنت تعمل بنظام Win):

  1. لديك وحدة تحكم المطور مفتوحة.
  2. لا تقم بتمكين أداة فحص التحويم حتى الآن ، ولكن بدلاً من ذلك افتح القائمة الفرعية التي تريدها عن طريق تحريك الماوس فوقها.
  3. نجاح Command+Shift+C (ماك) أو Ctrl+Shift+C (وين/لينكس)

الآن سيتم تطبيق أداة فحص التحويم على العناصر التي فتحتها في التنقل الفرعي.

5
Josh

لست متأكدًا مما إذا كانت موجودة في المراجعات السابقة للمتصفح ، لكنني اكتشفت هذه الطريقة البسيطة للغاية.

افتح المفتش في chrome أو Firefox ، وانقر بزر الماوس الأيمن على العنصر الذي تهتم به ، وحدد الخيار المناسب (في هذه الحالة: hover). سيؤدي ذلك إلى تشغيل CSS المقترن.

 Opening the menu in chromium  Opening the same menu in Firefox 

لقطات من Firefox 55 و chromium 61.

2
MayeulC

أشياء ممتازة!

شكرا لك على المعدلة وراثيا لهذه النصيحة. لم أكن أعرف عن إعدادات السمة هذه مفيدة بشكل كبير.

وكمراجعة صغيرة للصياغة ، أود أن أوضح هذه العملية على النحو التالي:

  • انقر بزر الماوس الأيمن على العنصر الذي تريد تصميمه

    • افتح أداة "الفحص"

    • في الجانب الأيمن ، انتقل إلى علامة تبويب الأنماط الصغيرة

    • وجدت أعلاه محتويات ورقة أنماط CSS

    • حدد خيار .hov - هذا سيمنحك كل الإعدادات المتاحة لعنصر HTML المحدد

    • انقر وتغيير جميع الخيارات لتكون غير نشطة

    • الآن حدد الحالة التي ترغب في ضبطها - عند تنشيط أي من هذه ، سيقفزك "ورقة الأنماط" الخاصة بك مباشرةً إلى هذه الإعدادات:

أنماط - التغيير والتبديل مرشحات - العناصر التفاعلية

كانت هذه المعلومات المنقذ بالنسبة لي ، لا أستطيع أن أصدق أنني سمعت عنها للتو!

1
Dan Haddock

قم بتغيير CSS بحيث لا يتم تطبيق الخاصية التي تخفي القائمة أثناء العمل عليها.

0
Woody