"Осмотреть" элемент наведения?

Примечание. Я читал похожие темы, но ни одна из них не была моей проблемой - я могу щелкнуть по ней нормально, она просто исчезает.

Я нахожу "Inspect Element" бесценным инструментом в Chrome, однако мой последний набег, когда я изучаю волшебные способы, которыми многие из вас уже обладают, заставили меня создать подменю для элемента на моей навигационной панели, который появляется внизу зависание этого родительского элемента.

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

Однако, как только я отодвигаю мышь от меню, она исчезла.

Поэтому я не могу выбрать различные элементы в области проверки и видеть, какая область выделена одновременно.

Есть ли способ обойти это, не меняя меню так, чтобы он "выскочил" после активации?

Ответ 1

Если эффект hover задан с помощью CSS, тогда да, я обычно использую два варианта, чтобы получить это:

Один, до see hover effect, когда мышь покидает hover area:
Откройте инспектора в пристыкованном окне и увеличьте ширину, пока не достигнете своего HTML element, затем щелкните правой кнопкой мыши, и всплывающее меню должно быть над зоной инспектора... тогда, когда вы переместите указатель мыши на просмотр инспектора, hover effect продолжит работу в документе.

Два, до keep hover effect, даже если мышь не находится над HTML element, откройте инспектор, перейдите к Styles TAB и щелкните по значку в верхнем правом углу, в котором говорится Toggle Element State... ( пунктирный прямоугольник со стрелкой). Там вы можете вручную активировать Hover Event (среди прочих) с установленным флажком.

~~Если это не ясно, дайте мне знать, и я могу добавить несколько скриншотов.~~ Отредактировано: добавлен снимок экрана.

И, наконец, и, как я уже сказал в начале, я могу это сделать, только если hover установлен с CSS:HOVER... когда вы управляете hover state с помощью jQuery.onMouseOver, например, работает только (иногда), метод One.

Надеюсь, что это поможет.

Ответ 2

Если наведение запускается JS, просто приостановите выполнение script с клавиатуры. Это намного более простой способ замораживания DOM, чем предлагают другие ответы.

Вот как вы это делаете в Chrome. Я уверен, что Firefox имеет эквивалентную процедуру:

Откройте "Инструменты разработчика" и перейдите в "Источники".
Обратите внимание на ярлык для приостановки выполнения script. Для меня это F8:
Взаимодействуйте с пользовательским интерфейсом, чтобы отобразить элемент.
Нажмите F8.
Как вы можете передвигать мышь, проверять DOM, что угодно. Элемент останется там.

Ответ 3

Что сработало для меня - это выбрать конкретный тег, который я хотел бы проверить, и сделать это:

После выполнения вышеизложенного я бы, как правило, обычно выбирал тег, тогда выпадающее меню будет автоматически оставаться как есть, даже когда я навешиваю указатель мыши на другие места, такие как Inspect Element и т.д.

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

Надеюсь, это поможет.:)

Ответ 4

Вы также можете сделать это в консоли javascript:

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

А, который "заморозит" элемент в состоянии "hover".

Ответ 5

Вот как я делаю это без изменений CSS или JS, останавливающихся в Chrome (я нахожусь на Mac и у меня нет ПК передо мной, если вы работаете в Win):

открыть консоль разработчика.
пока не активируйте инструмент проверки наведения, но вместо этого откройте нужное подменю, наведя на него указатель мыши.
нажмите [Command] + [Shift] + [c]

теперь инструмент проверки зависания будет применяться к элементам, которые вы открыли в своем навигаторе.

Ответ 6

Не уверен, что он присутствовал в предыдущих версиях браузера, но я только узнал об этом чрезвычайно простом методе.

Откройте инспектор в Chrome или Firefox, щелкните правой кнопкой мыши интересующий вас элемент и выберите соответствующий параметр (в данном случае: hover). Это вызовет связанный CSS.

Скриншоты из Firefox 55 и хрома 61.

Ответ 7

измените CSS так, чтобы свойство, которое скрывает меню, не применяется во время работы над ним, это то, что я делаю.

Ответ 8

Отличный материал!

Спасибо за gmo за этот совет. Я не знал об этих настройках атрибутов, очень полезных.

В качестве небольшого пересмотра формулировки я бы объяснил, что процесс выглядит следующим образом:

Щелкните правой кнопкой мыши элемент, который вы хотите стиль
- Откройте инструмент "Осмотреть"
- С правой стороны перейдите на вкладку "Маленькие стили"
- Найдено выше содержимого стилей CSS
- Выберите опцию .hov - это даст вам все настройки доступно для выбранного HTML-элемента
- Нажмите и измените все параметры, чтобы они неактивны
- Теперь выберите состояние, которое вы хотели бы настроить - при активации любого из них ваша таблица стилей перейдет прямо к этим настройкам:

Стили - Тонкие настройки - Интерактивные элементы

Эта информация была для меня спасением, я не могу поверить, что я только что слышал об этом!