请参阅：Chrome开发人员工具中的悬停状态

小开

我不认为有办法做到这一点。我提交了功能请求。如果有办法，谷歌的开发人员会粗暴地指出它，我会编辑我的答案。如果没有，我们将不得不拭目以待。（你可以在问题上标上星号投赞成票）

项目成员Chrome评论1：在10.0.620.0中，Styles面板显示所选元素的： hover样式，但不显示： active。

（截至本文）当前稳定通道版本为8.0.552.224。

您可以将GoogleChrome的稳定通道安装替换为beta频道或开发渠道（请参阅早期访问发布渠道）。

您也可以安装比开发频道更最新的Chrome二次安装。

… Canary版本的更新频率甚至高于Dev频道，并且在发布之前不会进行测试。由于Canary版本有时可能无法使用，因此无法将其设置为默认浏览器，并且可能会在GoogleChrome的上述任何频道之外安装。…

小开

编辑：这个答案是在bug修复之前，见tnothCut t的答案。

这有点棘手，但这是：

右键单击元素，但不要将鼠标指针移离元素，保持其悬停状态。
通过键盘选择检查元素，如按向上箭头，然后输入键。
在匹配的CSS规则下查看开发人员工具，您应该能够看到：hover。

PS：我在你的一个问题标签上试过了。

小开

最佳答案

现在您可以看到伪类规则并将它们强制应用于元素。

要查看样式窗格中的:hover等规则，请单击右上角的:hov小文本。

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

关于Chrome开发人员工具快捷方式中元素面板的其他提示。

小开

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

在Elements面板中单击Toggle Element state按钮并选择:hover。

在Scripts面板中，转到右下角的Event Listeners Breakpoints并选择Mouse -> mouseup。

现在检查菜单并选择您想要的框。当您释放鼠标按钮时，它应该停止并在Elements面板中显示选定的元素悬停状态（查看Styles部分）。

小开

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

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

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

您可以轻松修改它以删除事件处理程序，无论何时单击或对要停止的元素执行某些操作。

小开

我可以按照Babiker建议的以下步骤查看样式-"右键单击元素，但不要将鼠标指针移离元素，保持悬停状态。通过键盘选择检查元素，如向上箭头，然后回车键。"

对于更改样式，请按照上述步骤操作，然后-通过按键盘上的ctrl+TAB来更改浏览器选项卡。然后单击要调试的选项卡。您的悬停屏幕仍将在那里。现在小心地将鼠标带到开发人员工具区域。

小开

我想在我的Bootstrap工具提示上看到悬停状态。在Chromedev Tools中强制:hover状态并没有创建所需的输出，但通过控制台触发mouseenter事件在Chrome中起到了作用。如果页面上存在jQuery，您可以运行：

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

强制悬停或鼠标进入引导工具提示

小开

我知道我所做的是相当的变通办法，但它工作得很好，这就是我每次做的方式。

然后，像这样进行：

首先确保Chrome开发人员工具未停靠。
然后，只需将开发工具窗口的任何一侧移动到悬停时要检查的元素的中间。

最后，将鼠标悬停在元素上，右键单击并检查元素，将鼠标移动到开发工具窗口中，您将能够使用您的元素：hover css。

干杯！

小开

如果它有帮助，这在最新的Chrome（47.0.2526.106）中似乎更容易：

检查元素，然后单击左侧排水沟中的三个白点：

然后从此下拉列表中选择所需的元素状态：

小开

有几种方法可以在Chrome开发人员工具中查看胡佛州样式。

方法01

方法02

使用Firefox默认开发人员收费

使用Firebug

小开

在Chrome中更改为悬停状态非常简单，只需按照以下步骤操作：

1）在您的页面中右键单击并选择检查

2）选择要在DOM中检查的元素

3）选择引脚图标（切换元素状态）

4）然后勾选悬停

现在您可以在浏览器中看到所选DOM的悬停状态！

小开

在我的情况下，我想dubug bootstrap工具提示。但是上面的方法对我不起作用。我猜bootstrap通过类似鼠标输入/输出事件来实现这一点。

无论如何，当我将鼠标悬停在一个按钮上时，它会在按钮下方生成一个兄弟html元素，所以我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素，将鼠标悬停在按钮上，然后“Ctrl+C”，然后我可以粘贴包含生成代码的源代码。最后找到生成的代码，并通过“元素”选项卡中的“编辑为超文本标记语言”将其添加到源代码中。

希望它能帮助别人。

小开

代码也有可能隐藏在数据库中，并且没有包含它的实际文件。我的一个客户端有Color lib的“Travelify”主题，WP管理GUI中的一些选项直接写入数据库，数据库动态生成css代码——我可以在html源代码中看到css，但在任何实际文件中都看不到。这让我发疯了，花了我一段时间才弄清楚。有一个很棒的WP数据库搜索工具，名为“搜索和替换”，我发现它是无价的。当然要小心！

干杯！

小开

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

小开

可以使用JS在元素上触发MouseEvent。以下是hover的操作方法。

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