我用Chrome调试菜单悬停状态，这样做是为了能够看到悬停状态代码:

在元素面板上点击切换元素状态按钮并选择:悬停。

在“脚本”面板中，选择右下角的“事件侦听器断点”，然后选择鼠标->鼠标。

现在检查菜单并选择您想要的方框。当你释放鼠标按钮时，它应该会停止，并在元素面板中显示所选元素的悬停状态(请参阅样式部分)。

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

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

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

我认为这在Chrome中不再是一个问题，只是以防万一。我写了这个jQuery脚本，当我用TAB键移动时检查DOM。

如果更改为使用'mouseover'，将看起来像这样:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

您可以轻松地修改它，以便在单击或对想要停止的元素进行操作时删除事件处理程序。

我知道我所做的是相当的变通，但它工作完美，这是我每次都做的方式。

然后，像这样进行:

首先确保Chrome开发工具是未停靠的。 然后，将Dev Tools窗口的任意一侧移动到你想要检查的元素中间。

最后，悬停元素，右键单击并检查元素，将鼠标移动到开发工具窗口，你将能够玩你的元素:悬停css。

干杯!

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

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

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