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

我想查看我在 Chrome 中徘徊的锚点的:hover样式。在 Firebug 中,有一个样式下拉列表,允许我为元素选择不同的状态。我似乎在 Chrome 中找不到任何类似的东西。我想念什么吗?

答案

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

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

切换元素状态

要将元素强制为:hover状态,请右键单击它。

力元素状态

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

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

这有点棘手,但是这里是:

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

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

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

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

强制悬停或使用mouseent进行Bootstrap工具提示

您可以通过多种方式在 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开发者工具

然后,像这样继续:

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

将鼠标悬停在元素上

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

干杯!

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

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

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

现在检查菜单,然后选择所需的框。释放鼠标按钮时,它应停止并在 “ Elements面板中显示选定的元素悬停状态(请查看 “ Styles部分)。

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

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

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

1) 右键单击页面,然后选择检查

在此处输入图片说明

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

在此处输入图片说明

3)选择图钉图标在此处输入图片说明 (切换元素状态)

4)然后勾选悬停

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