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

Question

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

Answer 1

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

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

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

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

Answer 2

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

Это было немного сложно, но здесь идет:

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

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

Answer 3

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

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

Answer 4

Существует несколько способов просмотра стилей HOVER STATE в Chrome Developer Tools.

Метод 01

Метод 02

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

с Firebug

Answer 5

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

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

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

Answer 6

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

---

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

---

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

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

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

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

Answer 7

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

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

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

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

Ура!

Answer 8

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

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

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

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

Answer 9

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

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

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

Answer 10

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

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

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

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

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

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