Css 如何使用chrome web inspector查看悬停代码

使用chromes web inspector查看代码非常有用。但是您如何查看按钮的悬停代码呢？您必须将鼠标悬停在按钮上，因此无法在检查器中使用它（鼠标）。在inspector中是否有任何快捷方式或其他方法可以完成此任务？

我不确定是否正确理解您的问题，但如果您想查看事件处理程序代码，您可以检查元素并查看“元素”面板的“事件侦听器”侧栏窗格。 另一种方法是只需按下脚本面板中的暂停按钮，然后将元素悬停。

---

调试器将在第一个事件处理程序的第一条指令处停止。

或者，您可以使用“脚本”面板中的“事件侦听器断点”侧栏窗格，选择在鼠标悬停处理程序中暂停。

这有点烦人，但您需要右键单击元素，然后将鼠标停留在链接上，使用键盘选择“检查元素”链接并按enter键。这将向您显示选定元素的悬停伪类的css

---

希望他们能在以后的构建中让这变得容易一些

现在您可以看到伪类样式规则并将它们强制到元素上

要查看规则，如

：在样式窗格中悬停
，请单击右上角的小点框按钮


要强制元素进入
：将其悬停在
状态，请右键单击它


或者，您可以使用脚本面板中的事件侦听器断点侧栏窗格，并在鼠标悬停处理程序中选择暂停。
在Chrome中：
也可以将鼠标悬停在某个元素上，然后单击
CTRL+SHIFT+C
检查该元素

在Firefox中：

在firebug中：


来源：
请查看下面的链接以获取答案

您能不能更具体地说明一下您是如何做到这一点的？。一个典型的例子是我喜欢的一个按钮，我想看看悬停效果是如何以与普通inspect相同的简单方式实现的。很高兴知道，但是是的，鼠标需要保持悬停在链接上是非常令人沮丧的。。。即使您仅使用键盘在Inspect Element窗口中四处走动。真讨厌！强制元素进入
：悬停
状态的实际整个过程（如接受的答案中的
），也可以通过右键单击元素、检查并将指针保持在那里，然后使用键盘键检查伪代码来实现。。谢谢你的工作选择。。。。所以事实上这并不是一个讨厌的事情！：）+1这不是这个的复制品吗？这回答了你的问题吗？在Chrome48（以及之前的perh）中，该虚线框已被一个图钉图标替换，当您将鼠标悬停在该框上时，图钉图标会显示“切换元素状态”。然后从下拉列表中选择“悬停”。该链接可能会过期并使您的答案无效。请在您的回答中提供一些信息，以防止出现这种情况。