Как я могу увидеть стили, прикрепленные к: hover и другим псевдоклассам в firebug и отладчике chrome

Question

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

Например, я собираюсь редактировать .myclass:hover или #someid:active в отладчике.

ps.Меня больше интересует, как это сделать в отладчике Chrome, хотя firebug приветствуется!

Answer 1

Осмотрите элемент, а затем:

Для Firebug:

Обратите внимание, что CSS-код при наведении курсора исчезнет, ​​если вы снова пролетите над элементом (вы должны перепроверить : hover ).

Для Chrome:

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

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

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

Answer 2

В Chrome, вы просто щелкаете правой кнопкой мыши (чтобы вы зависали) div и нажимаете на Inspect. Если в консоли есть поле «Проверка», при щелчке правой кнопкой мыши в консоли «выпадает» мышь, и в то же время вы все еще зависаете над элементом div. Затем вы можете увидеть псевдо-стиль: hover как обычно.

Это глупо, но это мой обходной путь.

Answer 3

В Firebug вы можете выбрать элемент, используя: hover с синей стрелкой выбора, и вы сможете увидеть его, когда наводите курсор на элемент. К сожалению, когда вы перемещаете мышь, она исчезает, но вы можете увидеть, в какой строке она находится, и редактировать CSS на вкладке css firebug после этого.