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


See :hover state in Chrome Developer Tools

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

相关讨论

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

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

Toggle element state

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

Force element state

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

相关讨论

编辑：这个答案是在错误修复之前，请参阅tnothcutt的回答。这有点棘手，但是这里有：

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

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

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

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

Forcing hover or mouseenter for Bootstrap Tooltips

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

方法01

enter image description here

方法02

enter image description here

使用Firefox Default Developer Toll

enter image description here

用Firebug

enter image description here

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

检查元素，然后单击左侧排水沟中的三个白点：
click on the three white dots

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

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

Comment 1 by Chrome project member: In 10.0.620.0, the Styles panel shows the :hover styles for the selected element but not :active.

(截至本文)Current Stable频道版本为8.0.552.224。

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

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

... The Canary build is updated even more frequently than the Dev channel and is not tested before being released. Because the Canary build may at times be unusable, it cannot be set as your default browser and may be installed in addition to any of the above channels of Google Chrome. ...

相关讨论

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

Undock Chrome Developer Tools

然后，继续这样：

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

Hover on element

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

干杯!

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

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

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

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

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

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

希望它可以帮助某人。

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

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

enter image description here

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

enter image description here

3)选择图钉图标enter image description here(切换元素状态)

4)然后勾选悬停

> </p> <p> 现在您可以在浏览器中看到所选DOM的悬停状态！ </p> <hr> <p> 我可以按照Babiker建议的以下步骤看到这种风格 -<br />

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

相关讨论

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

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

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

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