请参阅 Chrome 开发者工具中的 ：hover 状态

我认为没有办法做到这一点。我提交了功能请求。如果有办法，谷歌的开发人员会毫不犹豫地指出来，我会编辑我的答案。如果没有，我们将不得不拭目以待。（您可以为该问题加星标以投票支持它）

---

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

---

（截至本文发布）当前稳定频道版本为 8.0.552.224。

您可以将 Google Chrome 的稳定版版安装替换为 Beta 版版或开发版（请参阅抢先体验版版版版）。

您还可以安装比 Dev 频道更新的 chrome 的辅助安装。

...Canary 版本的更新频率甚至高于 Dev 频道，并且在发布之前没有经过测试。由于 Canary 版本有时可能无法使用，因此无法将其设置为默认浏览器，并且可能与 Google Chrome 的上述任何渠道一起安装。...

编辑：这个答案是在错误修复之前，请参阅tnothcutt的答案。

这有点棘手，但这里是：

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

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

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

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

要强制某个元素进入状态，请右键单击该元素，然后选择 。:hover:hover

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

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

在面板中，单击“over”按钮，然后选择 。ElementsToggle Element state:hover

在面板中，转到右下角，然后选择 。ScriptsEvent Listeners BreakpointsMouse -> mouseup

现在检查菜单并选择所需的框。当您松开鼠标按钮时，它应该会停止并在面板中显示所选元素悬停状态（查看该部分）。ElementsStyles

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

如果更改为使用“鼠标悬停”，则如下所示：

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

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

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

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

我想在我的 Bootstrap 工具提示上查看悬停状态。在 Chrome 开发工具中强制状态不会创建所需的输出，但通过控制台触发事件在 Chrome 中起到了作用。如果页面上存在 jQuery，则可以运行：:hovermouseenter

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

我知道我所做的是相当可行的方法，但是它运行良好，这就是我每次都这样做的方式。

然后，像这样继续：

• 首先，确保 Chrome 开发者工具已取消停靠。
• 然后，只需将“开发工具”窗口的任何一侧移动到悬停时要检查的元素的中间即可。

• 最后，将鼠标悬停在元素上，右键单击并检查元素，将鼠标移动到 Dev Tools 窗口中，您将能够使用 element：hover css。

干杯！

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

检查元素，然后单击左侧装订线中的三个白点：

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

您可以通过多种方式在 Chrome 开发者工具中查看 HOVER 状态样式。

方法 01

方法 02

使用 Firefox 默认开发者通行费

使用 Firebug

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

1） 在页面中单击鼠标右键，然后选择“检查”

2） 选择您希望在 DOM 中检查的元素

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

4）然后勾选悬停

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

就我而言，我想 dubug 引导工具提示。但是上面的方法对我不起作用。我猜引导程序是通过鼠标输入/输出事件之类的东西实现的。

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

希望它能帮助到某人。

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

干杯！

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

可以使用 JS 触发 on 元素。这是如何做到这一点。MouseEventhover

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