现在可以看到两个伪类规则，并将它们强加到元素上。

要查看样式窗格中的:hover之类的规则，单击右上方的小:hov文本。

要强制一个元素进入:hover状态，右键单击它并选择:hover。

在Chrome开发人员工具快捷方式的元素面板上的额外提示。

编辑:这个答案是在错误修复之前，见tnotcutt的答案。这有点棘手，但如下所示:

右键单击元素，但不要将鼠标指针移离元素，保持悬停状态。 通过键盘选择检查元素，就像点击箭头，然后回车键。 在开发工具中匹配的CSS规则下，你应该可以看到:hover。

PS:我在你的一个问题标签上试过这个方法。

现在可以看到两个伪类规则，并将它们强加到元素上。

要查看样式窗格中的:hover之类的规则，单击右上方的小:hov文本。

要强制一个元素进入:hover状态，右键单击它并选择:hover。

在Chrome开发人员工具快捷方式的元素面板上的额外提示。

对我来说，为了调试这个工具提示，我点击切换设备工具栏切换到移动视图，然后点击有悬停效果的div，你也可以点击焦点可见来查看div和工具提示之间的间距，希望这将有所帮助。

有几种方法可以在Chrome开发工具中查看HOVER STATE样式。

方法1

方法2

与Firefox默认开发者通行费

与Firebug

使用JS可以触发元素上的MouseEvent。下面是如何对悬停进行操作。

使用右键单击检查元素。 像这样复制JS路径 在Sources Chrome DevTools中按“Esc”键打开控制台。 然后粘贴复制的路径，并添加.dispatchEvent(new MouseEvent('mouseover'， {'bubbles': true}));是这样的: 按enter键，然后可以与悬停状态后发生的任何DOM更改进行交互。