我如何看到样式附加到：hover和其他伪类在firebug和chrome调试器 [英] How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger

问题描述

我知道必须有办法做到这一点，我一直只是解决它，但有一些方法，我可以看到（和/或编辑）应用于元素的伪类样式？

例如，我想要编辑 .myclass：hover 或 #someid：active 。

ps。我真的更关心如何做到这一点在chrome调试器虽然firebug是赞赏！

解决方案

检查元素，然后：

对于Firebug：

请注意，如果您再次飞过元素，悬停CSS代码将会消失 ）。

$ b

你可以看到伪类类规则和强制它们的元素。

要在样式面板中查看它们，请点击右上角的小虚线框按钮。

要将元素强制为 ：hover 状态，请右键点击。

I know there must be a way to do this and I've always just worked around it but, is there some way I can see (and/or edit) the pseudo-class styles applied to an element?

For example, Im looking to edit .myclass:hover or #someid:active in the debugger.

ps. Im really more concerned with how to do this in the chrome debugger although firebug is appreciated to!

解决方案

Inspect the element, and then:

For Firebug:

Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).

For Chrome:

You can see both the psuedo-class rules and force them on elements.

To see them in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

这篇关于我如何看到样式附加到：hover和其他伪类在firebug和chrome调试器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！