CSS 如何使用 chrome web 检查器查看悬停代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5789739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use chrome web inspector to view hover code
提问by Bo.
Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?
使用 chromes web 检查器查看代码非常有用。但是，您如何查看例如按钮的悬停代码？您必须将鼠标悬停在按钮上，因此不能在检查器中使用它（鼠标）。是否有任何快捷方式或其他方法可以在检查器中完成此操作？
回答by Travis Northcutt
Now you can see both the pseudo-class style rules and force them on elements.
现在您可以看到伪类样式规则并将它们强制应用于元素。
To see the rules like :hoverin the Styles pane click the small dotted box button in the top right.
要查看:hover样式窗格中的规则，请单击右上角的小虚线框按钮。
To force an element into :hoverstate, right click it.
要强制元素进入:hover状态，请右键单击它。
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
或者，您可以使用“脚本”面板中的“事件侦听器断点”侧栏窗格并选择在鼠标悬停处理程序中暂停。
回答by Yury Semikhatsky
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
或者，您可以使用“脚本”面板中的“事件侦听器断点”侧栏窗格并选择在鼠标悬停处理程序中暂停。
回答by purpletonic
It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.
这有点烦人，但您需要右键单击该元素，然后将鼠标悬停在该链接上，使用键盘选择“检查元素”链接并按 Enter。这应该会显示所选元素的悬停伪类的 css。
Here's hoping they make this a little easier in future builds.
希望他们在未来的构建中使这更容易一些。
回答by T.Todua
In Chrome:
在 Chrome 中：
You can also mouseover on an element, and then click CTRL+SHIFT+Cto inspect that element.
您还可以将鼠标悬停在某个元素上，然后单击CTRL+SHIFT+C以检查该元素。
In Firefox:
在 Firefox 中：
in firebug:
在萤火虫中：
回答by loislo
I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel. Another way is just press pause button in Scripts Panel and just hover the element. The debugger will stop at the first instruction of the first event handler.
我不确定我是否正确理解您的问题，但是如果您想查看事件处理程序代码，您可以检查元素并查看元素面板的事件侦听器侧边栏窗格。另一种方法是在脚本面板中按下暂停按钮并悬停该元素。调试器将在第一个事件处理程序的第一条指令处停止。
