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

Posted 2023-03-06

【中文标题】请参阅 Chrome 开发者工具中的 :hover 状态

【英文标题】：See :hover state in Chrome Developer Tools

【发布时间】：2011-05-29 17:52:20

【问题描述】：

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

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

【问题讨论】：

好问题，因为我一直在寻找如何在 Firebug 中编辑悬停样式 - 请参阅此处***.com/questions/5389245/…

我知道这不是问题的完整/完美解决方案，但无法在适用于鼠标悬停事件的答案中找到解决方案。使用 Safari 可让您在使用浏览器工具时悬停。因此，仅针对此问题，请考虑使用其他浏览器。

【参考方案1】：

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

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

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

Chrome Developer Tools Shortcuts 中的elements panel 的其他提示。

【讨论】：

不确定何时更改，但您现在可以右键单击 -> 强制其他元素（不仅仅是 <a> 元素）上的元素状态（从元素窗格）。

这适用于 CSS :hover 更改，但如果您使用 JS 进行更改 onhover 则无效。

这是一个我拼凑的快速视频，演示 Chrome 59 中的 :hover 状态，如果它可以帮助任何人youtu.be/Bklz3lGTFi8

【参考方案2】：

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

这有点棘手，但这里是： 右键单击元素，但不要将鼠标指针从元素上移开，使其保持悬停状态。 通过键盘选择检查元素，如按向上箭头，然后按 Enter 键。 在 Matched CSS Rules 下查看开发者工具，您应该可以看到 :hover。

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

【参考方案3】：

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

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

【讨论】：

这是最好的答案

我收到此错误：Uncaught TypeError: $(...).trigger is not a function

@alansiqueira27 然后该站点没有包含 jQuery（它变得越来越不常见）。您必须使用普通的旧 javascript。也许这会起作用：***.com/a/50587874/457268

【参考方案4】：

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

方法01

方法02

使用 Firefox 默认开发人员收费

使用 Firebug

【参考方案5】：

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

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

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

【讨论】：

这里大部分其他帖子的重复。

【参考方案6】：

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

---

Comment 1 by Chrome project member：在 10.0.620.0 中，样式面板显示选定元素的 :hover 样式，但不显示 :active。

---

（截至本文）当前Stable channel 版本为 8.0.552.224。

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

您也可以安装secondary installation of chrome that is even more up to date than the Dev channel。

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

【讨论】：

伟大的调查。我正在使用最新的开发版本 (10.0.612.3)，所以我稍等一下，希望我能看到 :hover goodness！

【参考方案7】：

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

然后，像这样继续：

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

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

干杯！

【讨论】：

要添加评论，以便我可以再次找到它，因为我知道我会需要它！对于不可预测的第三方 UI 插件尤其重要。

【参考方案8】：

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

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

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

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

【参考方案9】：

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

1) 在您的页面中右键单击并选择检查

2) 在 DOM

中选择您想要检查的元素

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

4) 然后勾选悬停

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

【参考方案10】：

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

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

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

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

【讨论】：

我尝试了，但是window.inspect is not a function，并且无法导入工具！

【参考方案11】：

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

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

【讨论】：

您无需将鼠标保持在悬停状态

【参考方案12】：

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

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

希望它可以帮助某人。

【参考方案13】：

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

The way to see hover state with Chrome DevTools 在 YouTube 上。