923

我想查看:hover我在Chrome中悬停的锚点的样式。在Firebug中，有一个样式下拉列表允许我为元素选择不同的状态。

我似乎在 Chrome 中找不到类似的东西。我错过了什么吗？

4

13 回答 13

1367

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

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

切换元素状态

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

力元状态

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

于 2011-07-21T15:25:11.307 回答
56

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

这有点棘手，但这里是：

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

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

于 2010-12-23T01:47:53.243 回答
36

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

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

为引导工具提示强制悬停或鼠标输入

于 2014-12-23T15:25:30.920 回答
26

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

方法01

在此处输入图像描述

方法02

在此处输入图像描述

使用 Firefox 默认开发人员收费

在此处输入图像描述

与萤火虫

在此处输入图像描述

于 2017-01-06T08:05:05.423 回答
9

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

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

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

于 2016-01-04T19:22:01.733 回答
4

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

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

（截至这篇文章）当前稳定的频道版本是 8.0.552.224。

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

您还可以安装chrome 的二次安装，它比 Dev 频道更新。

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

于 2010-12-23T01:34:19.190 回答
4

我知道我所做的只是解决方法，但是它可以完美地工作，这就是我每次都这样做的方式。

取消停靠 Chrome 开发者工具

然后，像这样进行：

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

悬停在元素上

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

干杯!

于 2015-08-21T23:11:46.527 回答
3

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

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

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

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

于 2012-07-22T15:05:49.807 回答
3

您可以使用 Chrome DevTools查看悬停状态：

在此处输入图像描述

在 YouTube 上使用 Chrome DevTools 查看悬停状态的方法。

于 2021-09-18T06:32:19.727 回答
3

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

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

在此处输入图像描述

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

在此处输入图像描述

3）选择图钉图标 在此处输入图像描述 （切换元素状态）

4）然后勾选悬停

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

于 2017-06-26T09:01:17.603 回答
1

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

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

于 2014-05-02T10:55:52.023 回答
1

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

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

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

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

于 2013-10-18T01:26:19.687 回答
1

就我而言，我想调试引导工具提示。但是上面的方法对我不起作用。我猜引导程序通过鼠标输入/输出事件实现了这一点。

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

希望它可以帮助某人。

于 2018-01-30T08:58:16.933 回答