Смотрите: состояние наведения в Инструментах разработчика Chrome

Теперь вы можете видеть как правила псевдокласса, так и применять их к элементам.

Чтобы увидеть такие правила, как :hover, на панели "Стили" щелкните небольшой текст :hov в правом верхнем углу.

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

Дополнительные советы по панели элементов в Ярлыках инструментов разработчика Chrome.

РЕДАКТИРОВАТЬ: этот ответ был до исправления ошибки, см. Ответ tnothcutt.

• Щелкните элемент правой кнопкой мыши, но НЕ перемещайте указатель мыши от элемента, оставьте его в состоянии наведения.
• Выберите «Проверить элемент» с помощью клавиатуры, нажав стрелку вверх, а затем клавишу Enter.
• Загляните в инструменты разработчика в разделе «Соответствующие правила CSS», вы должны увидеть: hover.

PS: Я пробовал это с одним из ваших вопросов.

Я хотел видеть состояние зависания во всплывающих подсказках Bootstrap. Принуждение состояния: hover в инструментах разработчика Chrome не создавало требуемых выходных данных, но запуск события mouseenter через консоль помогал в Chrome. Если на странице существует jQuery, вы можете запустить:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Есть несколько способов увидеть стили HOVER STATE в Инструментах разработчика Chrome.

Метод 01

Метод 02

По умолчанию для разработчика Firefox

С Firebug

В случае, если это поможет, это, кажется, проще в последней версии Chrome (47.0.2526.106):

Осмотрите элемент и затем щелкните три белые точки в левом желобе:

Затем выберите желаемое состояние элемента из этого раскрывающегося списка:

Я не думаю, что есть способ сделать это. Я отправил запрос функции. Если есть способ, разработчики Google угрюмо укажут на него, и я отредактирую свой ответ. Если нет, придется подождать и посмотреть. (вы можете пометить вопрос, чтобы проголосовать за него)

Комментарий 1 участника проекта Chrome: в версии 10.0.620.0 , на панели «Стили» отображаются стили: hover для выбранного элемента, но не: активные.

(на момент публикации) Текущая версия стабильного канала - 8.0.552.224.

Вы можете заменить установленный вами стабильный канал Google Chrome на бета-канал или Канал разработки (см. Каналы выпуска в раннем доступе).

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

... Сборка Canary обновляется даже чаще, чем канал Dev, и не тестируется перед выпуском. Поскольку сборка Canary иногда может быть непригодной для использования, ее нельзя установить в качестве браузера по умолчанию и можно установить в дополнение к любому из указанных выше каналов Google Chrome. ...

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

Затем действуйте следующим образом:

• Сначала убедитесь, что Инструменты разработчика Chrome отключены.
• Затем просто переместите любую сторону окна инструментов разработчика в середину элемента, который вы хотите проверить при наведении курсора.

• Наконец, наведите указатель мыши на элемент, щелкните правой кнопкой мыши и проверьте элемент, переместите указатель мыши в окно инструментов разработчика, и вы сможете поиграть со своим элементом: hover css.

Ваше здоровье!

Я отлаживал состояние меню hover с помощью Chrome и сделал это, чтобы увидеть код состояния наведения:

На панели Elements нажмите кнопку Toggle Element state и выберите :hover.

На панели Scripts перейдите к Event Listeners Breakpoints в правом нижнем разделе и выберите Mouse -> mouseup.

Теперь проверьте меню и выберите нужный ящик. Когда вы отпускаете кнопку мыши, она должна остановиться и показать вам состояние наведения выбранного элемента на панели Elements (см. Раздел Styles).

Изменить статус на наведение в Chrome довольно просто. Для этого выполните следующие действия:

1) Щелкните правой кнопкой мыши на своей странице и выберите "Проверить".

2) Выберите элемент, который вы хотите проверить в DOM.

3) Выберите значок булавки (Переключить состояние элемента)

4) Затем отметьте наведение

Теперь вы можете видеть, в каком состоянии находится выбранный DOM в браузере!

Я мог увидеть стиль, выполнив следующие шаги, предложенные Бабикером: «Щелкните элемент правой кнопкой мыши, но НЕ перемещайте указатель мыши от элемента, держите его в состоянии наведения. Выберите элемент проверки с помощью клавиатуры, как при нажатии стрелки вверх и затем нажмите клавишу Enter ".

Чтобы изменить стиль, выполните указанные выше действия, а затем - Измените вкладку браузера, нажав ctrl + TAB на клавиатуре. Затем вернитесь на вкладку, которую хотите отладить. Ваш экран наведения все еще будет там. Теперь осторожно подведите указатель мыши к области инструментов разработчика.

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

В любом случае, когда я наведен на кнопку, она сгенерирует дочерний элемент html под кнопкой, поэтому я выбираю родительский элемент кнопки на вкладке «Элементы» окна «Инструменты разработчика», нахожу кнопку и нажимаю «Ctrl + C», затем я могу вставить исходный код, содержащий сгенерированный код. Последним найдите сгенерированный код и добавьте его в исходный код, выбрав «Редактировать как HTML» на вкладке «Элементы».

Надеюсь, это поможет кому-нибудь.

Думаю, в Chrome это больше не проблема, но на всякий случай. Я написал этот скрипт jQuery для проверки DOM, когда я перемещаюсь с помощью клавиши TAB.

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

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

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