См .: состояние наведения в Chrome Developer Tools

Я хочу увидеть :hoverстиль якоря в Chrome . В Firebug есть выпадающий список стилей, который позволяет мне выбирать различные состояния для элемента.

Я не могу найти ничего похожего в Chrome. Я что-то пропустил?

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

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

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

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

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

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

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

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

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

Есть несколько способов увидеть стили HOVER STATE в Chrome Developer Tools.

Метод 01

Способ 02

С платным Firefox разработчиком по умолчанию

С Firebug

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

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

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

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

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

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

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

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

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

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

Затем действуйте так:

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

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

Ура!

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

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

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

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

Переключиться в режим наведения в Chrome довольно просто, просто выполните следующие действия:

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

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

3) Выберите значок булавки (Toggle Element State)

4) Затем отметьте парение

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

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

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

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

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

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

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

Если изменить для использования mouseover, будет выглядеть так:

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

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