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

我想看看:hover我在Chrome中徘徊的锚点的样式。在Firebug中，有一个样式下拉菜单，允许我为元素选择不同的状态。

我似乎在Chrome中找不到任何类似的东西。我想念什么吗？

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

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

要强制某个元素进入:hover状态，请右键单击它。

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

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

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

PS：我在您的一个问题标签上尝试过此操作。

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

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

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

方法01

方法02

使用Firefox默认开发人员费用

与萤火虫

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

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

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

我认为没有办法做到这一点。我提交了功能请求。如果有办法，Google的开发人员会指出这一点，然后我将编辑我的答案。如果没有，我们将不得不拭目以待。（您可以为该问题加注星标以进行投票）

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

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

您可以用Beta通道或Dev通道替换Google Chrome的稳定通道安装（请参阅Early Access Release Channels）。

您还可以安装chrome的辅助安装，该安装比Dev通道的更新还要新。

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

我知道我所做的只是解决方法，但是它工作得很好，这就是我每次都这样做的方式。

然后，像这样继续：

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

• 最后，将鼠标悬停在元素上，右键单击并检查元素，将鼠标移到“开发工具”窗口中，就可以使用元素了：将css悬停。

干杯!

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

在Elements面板中单击，Toggle Element state然后选择:hover。

在Scripts面板中，转到Event Listeners Breakpoints右底部，然后选择Mouse -> mouseup。

现在检查菜单，然后选择所需的框。当您释放鼠标按钮时，它应该停止并在Elements面板中显示所选元素的悬停状态（请参见本Styles节）。

在Chrome中更改为悬停状态非常容易，只需执行以下步骤：

1）右键单击页面，然后选择检查

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

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

4）然后勾选悬停

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

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

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

就我而言，我想调试引导工具提示。但是上述方法对我不起作用。我猜bootstrap是通过mouse in / out事件来实现的。

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

希望它可以帮助别人。

我认为这不再是Chrome中的问题，以防万一。我使用TAB键编写此jQuery 脚本来检查DOM。

如果更改为使用“ mouseover”，则如下所示：

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

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