Проверка состояния Hover в Firebug или Chrome DevTools

Question

У меня есть элемент HTML, который имеет состояние зависания CSS. Есть ошибка с пометкой или отступом при наведении, и каждый раз, когда я наводил курсор мыши, содержимое элемента скользит немного, его раздражает.

Я хотел бы отлаживать использование FireBug или Chrome Dev Tools, но общая проблема, с которой я столкнулась с этими инструментами, заключается в том, что после того, как я выбираю элемент из Firebug/devtools, мне, очевидно, нужно переместить мышь обратно в dev инструменты и состояние зависания больше не включены.

Как проверить/отладить элемент HTML с помощью этих инструментов с элементом в его зависающем состоянии?

Answer 1

У Chrome Dev Tools есть встроенный селектор состояния hover на панели Элементы> Стили. Вы можете также переключать другие псевдоклассы (например: active).

Answer 2

Вот снимок экрана поджигатель & тех, кто не достаточно острым, чтобы увидеть комментарий agriboz в (как я)

Answer 3

Для тестирования :hover состояний в Chrome

Для тестирования :hover состояние в Firefox (Вы должны firebug добавить в)

Answer 4

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

Чтобы просмотреть такие правила, как: наведите указатель мыши на панель «Стили», нажмите маленькую кнопку с пунктиром в правом верхнем углу.

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

В качестве альтернативы вы можете использовать панель боковых панелей точек прослушивания событий на панели «Сценарии» и выбрать паузу в обработчиках наведения.