如何使用chrome web Inspector查看hover代码
使用chromes web Inspector查看代码非常有用。但是，您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上，因此无法在检查器中使用它（鼠标）。在检查器中是否有任何捷径或其他方法可以完成此任务？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
现在您可以看到伪类样式规则并将它们强制应用于元素。
要在“样式”窗格中查看诸如
:hover之类的规则，请单击右上角的小虚线框按钮。要强制元素进入
:hover状态，请右键单击它。或者，您可以使用“脚本”面板中的“事件侦听器断点”侧边栏窗格，并选择在鼠标悬停处理程序中暂停。
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.To force an element into
:hoverstate, right click it.Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
或者，您可以使用“脚本”面板中的“事件侦听器断点”侧边栏窗格，并选择在鼠标悬停处理程序中暂停。
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
这有点烦人，但您需要右键单击该元素，然后将鼠标悬停在链接上，使用键盘选择“检查元素”链接并按 Enter 键。这应该显示所选元素的悬停伪类的 css。
希望他们在未来的构建中能让这变得更容易一些。
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.
Here's hoping they make this a little easier in future builds.
在 Chrome 中：
您还可以将鼠标悬停在某个元素上，然后单击 CTRL+SHIFT+C 来检查该元素。
在 Firefox 中：
在 firebug 中：
来源：https://stackoverflow.com/a/11272205/2165415
In Chrome:
You can also mouseover on an element, and then click
CTRL+SHIFT+Cto inspect that element.In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
我知道这是一个老问题
我要做的就是在控制台中运行它并快速悬停我需要检查
以释放此断点的元素，然后单击开发工具的
Sources选项卡中的“resume script...”I know it is old question
What i do is run this in console and quicly hover the element i need to inspect
to release this breakpoint click "resume script..." in
Sourcestab of dev tools我不确定我是否正确理解您的问题，但如果您想查看事件处理程序代码，您只需检查元素并查看元素面板的事件侦听器侧边栏窗格。
另一种方法是按脚本面板中的暂停按钮并将鼠标悬停在元素上。
调试器将在第一个事件处理程序的第一条指令处停止。
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.
请查看下面的链接以获取答案
请参阅：悬停状态Chrome 开发者工具
Please have a look on below link for answer
See :hover state in Chrome Developer Tools