См. Раздел "Состояние зависания" в инструментах разработчика Chrome.

Ответ 1

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

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

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

Дополнительные советы на панели в "Горячие клавиши для разработчиков Chrome" .

Ответ 2

EDIT: этот ответ был до исправления ошибки, см. ответ tnothcutt.

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

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

Ответ 3

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

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

Ответ 4

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

Метод 01

Метод 02

С Firefox Developer Developer Toll

С Firebug

Ответ 5

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

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

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

Ответ 6

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

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

(по состоянию на этот пост) Current Стабильный канал версии 8.0.552.224.

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

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

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

Ответ 7

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

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

В панели Scripts перейдите в Event Listeners Breakpoints в правой нижней части и выберите Mouse -> mouseup.

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

Ответ 8

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

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

Ответ 9

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

Затем выполните следующие действия:

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

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

Ура!

Ответ 10

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

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

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

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

Ответ 11

Переход на hover статус в Chrome довольно прост, просто выполните следующие действия:

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

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

3) Выберите значок пиктограммы (Toggle Element State)

4) Затем отметьте hover

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