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

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

Я нахожу "Inspect Element" бесценным инструментом в 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, что угодно. Элемент останется там.

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

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

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

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

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

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

Объект, который «заморозит» элемент в состоянии «зависания».

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

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

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

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

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

Скриншоты из Firefox 55 и Chrome 61.

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

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

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

• Щелкните правой кнопкой мыши элемент, который хотите стилизовать.

  • Откройте инструмент "Осмотреть"

  • Справа перейдите на небольшую вкладку "Стили".

  • Найдено над содержимым таблицы стилей CSS

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

  • Щелкните и сделайте все параметры неактивными

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

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

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

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

Итак, вот что я сделал:

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

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

2. Затем, когда консоль разработчика открыта в Chrome, наведите указатель мыши на свой элемент, и вы войдете в режим отладчика. Перейдите в раздел источников инструментов разработчика и нажмите кнопку «Возобновить выполнение скрипта» (синяя кнопка ниже).

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

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