"Оглянути" елемент наведення?

Примітка: я читав подібні теми, але жодна не зовсім моя проблема - я можу клацнути правою кнопкою миші її, вона просто зникає.

Я вважаю, що "Огляньте елемент" безцінним інструментом у Chrome, проте мій останній набіг, коли я дізнаюся про чарівні способи, з яких багато хто з вас уже має, побачив, як я створюю підменю для елемента на моїй навігаційній панелі, який з'являється внизу після наведення його батьківський предмет.

Спливаюче вікно (або вниз) не так стильно, як мені б хотілося, тому я клацніть правою кнопкою миші> оглянути елемент, щоб побачити, що відбувається звідки саме там, і отримати краще уявлення про те, як досягти бажаного ефекту.

Однак, як тільки я відсуну мишку від меню, вона пропала.

Тому я не можу вибрати різні елементи на панелі перевірки і побачити, яка область виділяється одночасно.

Чи є спосіб обійти це питання, не змінюючи меню, щоб воно залишалося "спливаючим" після активації?

Якщо hoverефект дається CSSтоді, так, я зазвичай використовую два варіанти, щоб отримати це:

Один з них , щоб коли миша залишити : Відкрийте інспектор в пристикований вікні і збільшувати ширину до досягнення ваших , а потім клацніть правою кнопкою миші і у спливаючому меню повинно бути над зоною інспектор ... тоді , коли ви переміщаєте мишу на думку інспектора , зберегти активовано в документі.seehover effecthover area
HTML elementhover effect

По- друге, до навіть якщо миша не над , відкрийте інспектор, перейдіть і натисніть в правому верхньому значок , який говорить ... (пунктирний прямокутник зі стрілкою) Там ви вручну можете активувати (серед інших) з прапорець наданий.keephover effectHTML elementStyles TABToggle Element StateHover Event

Якщо це зовсім не зрозуміло, дайте мені знати, і я можу додати кілька скріншотів. Відредаговано : скріншот додано.

І , нарешті , і , як я сказав на початку, я тільки бути в змозі зробити це , якщо hoverвстановлений з CSS:HOVER... коли ви контролюєте hover stateзjQuery.onMouseOver , наприклад, тільки працює (іноді), метод One.

Сподіваюся, це допомагає.

Якщо наведенні запускається JS, просто призупиніть виконання сценарію за допомогою клавіатури. Це набагато простіший спосіб заморозити DOM, ніж інші відповіді.

Ось як ви це робите в Chrome. Я впевнений, що у Firefox є рівнозначна процедура:

1. Відкрийте Інструменти для розробників та перейдіть до Джерела.

2. Зверніть увагу на ярлик для призупинення виконання сценарію - F8.

   

3. Взаємодійте з інтерфейсом користувача, щоб отримати елемент для появи.

4. Удар F8.
5. Тепер ви можете переміщати мишу, оглядати DOM, що завгодно. Стихія залишиться там.

Що для мене працювало - це вибрати конкретний тег, який я хотів би перевірити, і зробити це:

Зробивши вищесказане, я знову обираю тег, тоді спадне меню автоматично залишатиметься таким, що є, навіть коли я переходив курсор миші до інших місць, таких як Огляд елемента тощо

Ви можете просто оновити браузер, перевіряючи елементи меню, що випадає, щоб повернутися до нормального стану.

Сподіваюся, це допомагає. :)

Ви також можете це зробити на консолі javascript:

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

Що дозволить "заморозити" елемент у стані "наближення".

Ось як я це роблю без змін CSS або призупинення JS в Chrome (я на Mac і не маю перед собою ПК, якщо ви працюєте на Win):

1. відкрити консоль розробника.
2. ще не вмикайте інструмент перевірки наведення курсору, а натомість відкрийте потрібне підменю, перемістивши мишу на ньому.
3. натисніть Command+ Shift+ C(Mac) або Ctrl+ Shift+ C(Win / Linux)

тепер інструмент перевірки наведення курсору застосує до елементів, які ви відкрили у підпункті навігації.

Не впевнений, чи він був присутній у попередніх версіях браузера, але я щойно з’ясував цей надзвичайно простий метод.

Відкрийте інспектор у хромі або Firefox, клацніть правою кнопкою миші на елементі, який вас цікавить, і виберіть відповідний варіант (у цьому випадку: наведіть курсор). Це запустить пов’язаний CSS.

Знімки екрана з Firefox 55 та Chrome 61.

Відмінні речі!

Дякую gmo за цю пораду. Я не знав про ці параметри атрибутів масово корисних.

Як невелике перегляд формулювання я поясню цей процес наступним чином:

• Клацніть правою кнопкою миші на елементі, який ви хотіли б укласти

  • Відкрийте інструмент "Перевірити"

  • Праворуч перейдіть до маленької вкладки Стилі

  • Знайдено вище вмісту таблиці стилів CSS

  • Виберіть параметр .hov - це дасть вам усі налаштування, доступні для обраного елемента HTML

  • Клацніть та Змініть усі параметри, щоб бути неактивними

  • Тепер виберіть стан, який ви хочете налаштувати - Після активації будь-якого з них ваш стілець перейде безпосередньо до цих налаштувань:

Стилі - Налаштування фільтрів - Інтерактивні елементи

Ця інформація була для мене рятівником, не можу повірити, що я щойно чув про неї!

змінити CSS, щоб властивість, яка приховує меню, не застосовувалася під час роботи над ним, це те, що я роблю.

Мені це потрібно було зробити, але елемент, який я намагався перевірити, був доданий і динамічно видалений на основі стану наведення іншого елемента. Моє рішення схоже на це , але це не дуже спрацювало для мене.

Отже ось що я зробив:

1. Додайте простий скрипт, щоб увійти в режим налагодження mouseoverелемента, який запускає подію, що вас хвилює.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Потім, відкривши консоль розробника в Chrome, наведіть курсор миші на ваш елемент, і ви перейдете до режиму налагодження. Перейдіть до розділу джерел інструментів розробників та натисніть кнопку "Відновити виконання сценарію" (синя кнопка, що нагадує відтворення внизу).

Після цього ваш DOM буде призупинено в режимі наведення курсора, і ви можете використовувати інспектор елементів, щоб перевірити всі елементи, які вони існують у цьому стані.