如何在 firebug 和 chrome 调试器中查看附加到 :hover 和其他伪类的样式
我知道必须有一种方法可以做到这一点，并且我一直在解决它，但是，有什么方法可以让我看到（和/或编辑）应用于元素的伪类样式吗？
例如，我希望在调试器中编辑 .myclass:hover 或 #someid:active。
附：我真的更关心如何在 chrome 调试器中执行此操作，尽管 firebug 很受欢迎！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
检查该元素，然后：
对于 Firebug：
请注意，如果出现以下情况，悬停 CSS 代码将会消失您再次飞越该元素（您必须重新检查:hover）。
对于 Chrome：
您可以查看伪类规则并将其强制应用于元素。
要在“样式”窗格中查看它们，请单击右上角的小虚线框按钮。
要强制元素进入
:hover状态，请右键单击它。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
:hoverstate, right click it.在 Chrome 中，您只需右键单击（以便悬停）该 div，然后单击“检查”。
如果 Inspect 框位于控制台中，那么当您右键单击它时，您的鼠标会“落入”控制台中，同时您仍将鼠标悬停在 div 上。然后你就可以正常看到 :hover 伪样式了。
这很愚蠢，但这是我的解决方法。
In Chrome, you just right click (so that you ARE hovering) the div and click on Inspect.
If the Inspect box is in the console, when you right click it, your mouse "fall" in the console and you are still hovering the div at the same time. Then you cqn see the :hover pseudo style normally.
This is stupid, but this is my workaround.
在 Firebug 中，您可以使用 :hover 和蓝色选择箭头工具来选择一个元素，当您将鼠标悬停在该元素上时，您将能够看到它。不幸的是，当你移动鼠标时，它就会消失，但你可以看到它在哪一行，然后通过 firebug css 选项卡编辑 CSS。
In Firebug you can select an element using :hover with the blue select arrow tool and you'll be able to see it while you are hovering over the element. Unfortunately when you move your mouse it goes away, but you can see what line it is on and edit the CSS through the firebug css tab after that.