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

Question

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

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

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

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

однако, как только я убираю мышь из меню, она исчезает.

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

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

646 8

google-chrome google-chrome-devtools

8 ответов:

Comments

Ничего не найдено.

gmo · Accepted Answer · 2013-07-12 00:09:41

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

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

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

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

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

надеюсь, что это помогает.

mxk · Accepted Answer · 2018-04-24 08:13:56

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

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

откройте инструменты разработчика и перейдите к источникам.

обратите внимание на ярлык для приостановки выполнения сценария. Для меня это F8:

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

нажмите F8.

теперь вы можете перемещать мышь вокруг, проверить DOM, что угодно. Элемент останется там.

Woppi · Accepted Answer · 2015-05-24 06:48:56

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

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

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

надеюсь, что это помогает. :)

pixelearth · Accepted Answer · 2016-12-01 06:04:03

вы также можете сделать это в консоли JavaScript:
$('#foo').trigger('mouseover');
Это будет "заморозить" элемент в состоянии" hover".

Josh · Accepted Answer · 2017-03-09 19:03:33

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

откройте консоль разработчика.

не включайте инструмент проверки наведения, но вместо этого откройте нужное подменю, наведя на него курсор мыши.

хит [команда]+[Shift]+[c]

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

MayeulC · Accepted Answer · 2017-09-19 14:58:14

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

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

скриншоты из Firefox 55 и chromium 61.

Woody · Accepted Answer · 2013-07-11 23:36:11

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

Dan Haddock · Accepted Answer · 2017-07-08 12:27:10

отличные вещи!

спасибо ГМО за этот совет. Я не знал, что эти настройки атрибутов очень полезны.

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

щелкните правой кнопкой мыши на элементе, который вы хотели бы стиль

откройте инструмент' Inspect'

на правой стороне, перейдите к небольшим стилям вкладка

найдено выше содержимого таблицы стилей CSS

выбрать .hov опция - это даст вам все настройки доступно для выбранного элемента HTML

нажмите и измените все параметры, чтобы быть неактивным

Теперь выберите состояние, которое вы хотели бы настроить-при активации любого из них, ваша таблица стилей будет переходить непосредственно к ним настройки:

стили-настройка фильтров-интерактивные элементы

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