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.
例如，我希望在调试器中编辑.myclass：hover或#someid：active。
ps. Im really more concerned with how to do this in the chrome debugger although firebug is appreciated to!
PS。我真的更关心如何在chrome调试器中执行此操作，尽管感谢firebug！
3 个解决方案
#1
28
Inspect the element, and then:
检查元素，然后：
For Firebug:
对于Firebug：
Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).
请注意，如果再次飞越元素，悬停CSS代码将消失（您必须重新检查：悬停）。
For Chrome:
对于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.
要强制元素进入：悬停状态，请右键单击它。
#2
1
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.
在Chrome中，您只需右键单击（以便您正在悬停）div并单击Inspect。如果Inspect框在控制台中，当你右键单击它时，你的鼠标“掉落”在控制台中，你仍然在同一时间盘旋div。然后你cqn正常看到：hover伪样式。
This is stupid, but this is my workaround.
这是愚蠢的，但这是我的解决方法。
#3
0
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.
在Firebug中，您可以选择一个元素：使用蓝色选择箭头工具悬停，当您将鼠标悬停在元素上时，您将能够看到它。不幸的是，当你移动鼠标时它会消失，但你可以看到它在哪一行，然后通过firebug css标签编辑CSS。
#1
28
Inspect the element, and then:
检查元素，然后：
For Firebug:
对于Firebug：
Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).
请注意，如果再次飞越元素，悬停CSS代码将消失（您必须重新检查：悬停）。
For Chrome:
对于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.
要强制元素进入：悬停状态，请右键单击它。
#2
1
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.
在Chrome中，您只需右键单击（以便您正在悬停）div并单击Inspect。如果Inspect框在控制台中，当你右键单击它时，你的鼠标“掉落”在控制台中，你仍然在同一时间盘旋div。然后你cqn正常看到：hover伪样式。
This is stupid, but this is my workaround.
这是愚蠢的，但这是我的解决方法。
#3
0
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.
在Firebug中，您可以选择一个元素：使用蓝色选择箭头工具悬停，当您将鼠标悬停在元素上时，您将能够看到它。不幸的是，当你移动鼠标时它会消失，但你可以看到它在哪一行，然后通过firebug css标签编辑CSS。