如何使用chrome web inspector查看hover代码
使用chromes web inspector来查看代码是非常有用的。 但是，如何查看button的hover代码？ 您将不得不将鼠标hover在button上，因此不能在检查器中使用它（鼠标）。 检查员有没有捷径或其他的方法来达到这个目的？
现在你可以看到两个伪类风格的规则，并强制它们在元素上。
要查看如下规则:hover在“样式”窗格中，然后单击右上angular的小型虚线框button。
要强制元素进入:hover状态，请右键单击它。
或者，也可以使用“脚本”面板中的“事件侦听器断点”边栏窗格，然后select在“鼠标hover”处理程序中暂停。
或者，也可以使用“脚本”面板中的“事件侦听器断点”边栏窗格，然后select在“鼠标hover”处理程序中暂停。
这有点烦人，但是您需要右键单击元素，然后将鼠标hover在链接上，使用键盘select“检查元素”链接，然后按Enter键。 这应该显示你所选元素的hover伪类的CSS。
希望他们能够在未来的版本中做到这一点。
在Firefox中：
在萤火虫：
来源： https ： //stackoverflow.com/a/11272205/2165415
我不确定我是否理解你的问题，但如果你想看到事件处理程序的代码，你可以检查元素，看看元素面板的事件监听器边栏窗格。 另一种方法是在脚本面板中按暂停button，然后将鼠标hover在元素上。 debugging器将在第一个事件处理程序的第一条指令处停止。
请看下面的链接来回答
请参阅：Chrome开发人员工具中的hover状态
