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

我希望看到:hover我在Chrome中徘徊的锚点的:hover样式。 在Firebug中，有一个样式下拉列表，允许我为元素选择不同的状态。 我似乎无法在Chrome中找到类似内容。 我错过了什么吗？

---

#1楼

我正在使用Chrome调试菜单hover状态并执行此操作以查看悬停状态代码：

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

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

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

---

#2楼

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

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

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

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

---

#3楼

我可以按照Babiker建议的以下步骤看到这种风格 - “右键单击元素，但不要将鼠标指针移离元素，使其保持悬停状态。通过键盘选择检查元素，如在向上箭头和然后输入密钥。“

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

---

#4楼

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

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

---

#5楼

我知道我所做的就是解决方法，但它完美无缺，这就是我每次都这样做的方式。

然后，继续这样：

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

• 最后，悬停元素，右键单击并检查元素，将鼠标移动到开发工具窗口，您就可以使用元素：hover css。

干杯!

---

#6楼

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

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

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

---

#7楼

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

方法01

方法02

使用Firefox Default Developer Toll

用Firebug

---

#8楼

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

1） 右键单击页面并选择检查

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

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

4）然后勾选悬停

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

---

#9楼

我认为没有办法做到这一点。 我提交了一个功能请求 。 如果有办法，谷歌的开发人员会勉强指出它，我会编辑我的答案。 如果没有，我们将不得不等待观看。 （你可以为问题加注星标投票）

---

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

---

（截至本文）Current Stable频道版本为8.0.552.224。

您可以使用Beta频道或开发频道替换Google Chrome的稳定频道安装（请参阅早期访问版本频道 ）。

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

... Canary版本比Dev版本更新更频繁，并且在发布之前未经过测试。 由于Canary版本有时可能无法使用，因此无法将其设置为默认浏览器，并且除了上述Google Chrome浏览器的任何渠道外，还可以安装。 ...

---

#10楼

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

这有点棘手，但这里有：

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

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

---

#11楼

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

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

希望它可以帮助某人。

---

#12楼

现在，您可以看到伪造的类规则并强制它们在元素上。

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

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

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