“检查”悬停元素？答案

【问题标题】："Inspect" a hover element?“检查”悬停元素？
【发布时间】：2013-07-10 06:28:44
【问题描述】：

注意：我读过类似的帖子，但都不是我的问题 - 我可以右键单击它，然后它就消失了。

我发现“检查元素”是 Chrome 中的一个非常宝贵的工具，但是我最近一次尝试学习了你们中许多人已经拥有的神奇方式，我看到我在导航栏上为一个元素创建了一个子菜单，它会在下面弹出悬停在它的父项上。

弹出（或向下）的样式不太符合我的要求，因此我右键单击 > 检查元素以查看究竟来自哪里，并更好地了解如何实现我想要的效果。

但是，一旦我将鼠标从菜单上移开，它就消失了。

所以我无法在检查窗格中选择不同的元素，同时查看哪个区域突出显示。

有没有办法解决这个问题，而无需更改菜单以使其在激活后保持“弹出”状态？

【问题讨论】：

在这种情况下，我通常使用控制台对页面进行临时修改，例如从父菜单中删除mouseleave 事件。即使您将鼠标从父菜单上移开，子菜单也应该保持打开状态。
Chrome 现在支持这个。选择 UI 元素（例如标签）> 检查元素 > 样式选项卡，在过滤器框旁边有一个“:hov”部分。点击它。现在您可以选择悬停复选框并查看悬停时加载的样式。

标签： google-chrome browser hover google-chrome-devtools inspect

【解决方案1】：

如果悬停是由 JS 触发的，只需通过键盘暂停脚本执行即可。这是一种比其他答案建议的更简单的冻结 DOM 的方法。

以下是您在 Chrome 中的操作方法。我确定 Firefox 有一个等效的程序：

打开开发者工具并转到源代码。
注意暂停脚本执行的快捷键——F8。
与 UI 交互以显示元素。
按 F8。
现在您可以移动鼠标、检查 DOM 等等。该元素将保留在那里。

【讨论】：

这里提供的其他方法在很多情况下都不起作用。
太棒了。我认为这是最好的方法。
对于 Safari，它是 Debugger 选项卡
它对我不起作用。在F8 之后，屏幕冻结，无法选择任何元素。我的解决方法是按F8，切换到Elements 标签，然后搜索悬停元素上的单词。
它在 Firefox 上的工作方式相同，但您需要在按 F8 之前将焦点放在调试器选项卡中（该快捷方式从那里工作）。暂停后，您可以检查 DOM，其中包含仅在 :hover 状态存在期间存在的所有元素。这只是在悬停要检查的元素时按 F8 的问题。如果您需要选择另一个元素，请尽量避免使用上下文菜单进行检查（可能会触发取消暂停）。使用开发工具左上角的图标来捕获它。

【解决方案2】：

如果hover 效果与CSS 一起给出，那么是的，我通常使用两个选项来获得这个：

一、到seehover effect当鼠标离开hover area:
在停靠窗口中打开检查器并增加宽度直到到达您的HTML element，然后右键单击并且弹出菜单必须在检查器区域上方......然后当您将鼠标移到检查器视图上时，hover effect 保持激活在文档中。

二，到keephover effect，即使鼠标不在HTML element上，打开检查器，转到Styles TAB并点击右上角的Toggle Element State图标...(带箭头的虚线矩形）在那里您可以使用提供的复选框手动激活Hover Event（以及其他）。

~~如果不清楚，请告诉我，我可以添加一些截图。~~ 已编辑：添加了屏幕截图。

最后，正如我在开头所说的那样，我只能在 hover 设置为 CSS:HOVER 时执行此操作...例如，当您使用 jQuery.onMouseOver 控制 hover state 时，仅适用（有时）方法一。

希望对你有帮助。

【讨论】：

你的第一个解决方案是一个很好的解决方法，我有办法让它变得更好：右键单击悬停的元素，将鼠标完全移开到“检查区” ，然后使用 键盘键 导航并在“检查元素”上按 Enter。该元素将保持悬停。至于你的第二个解决方案，是的，那（或使用上下文菜单的:hover）显然应该是正确的解决方案，但很不幸，只要我记得，这在 Chrome/Firefox 上都不起作用......
我习惯在 Windows 中这样做，但在 Mac 中这个技巧不起作用，有没有人在 mac 上找到方法？即使鼠标在检查器或子菜单中，它似乎也将鼠标移动事件“传达”到窗口
@GiladBarner 感谢您提供的快捷方式，它对我有用。我不知道这是否只是我的 PC 上的问题，但我看不到通过键盘选择的菜单选项，并且在下拉菜单可见时快捷键 (ctrl-shift-I) 不起作用，因此，由于检查元素是下拉列表中的最后一个选项，因此我使用向上箭头键环绕到最后一项并按 Enter，它起作用了。
目前:hover 选项似乎在切换类选项中

【解决方案3】：

对我有用的是选择我想要检查的特定标签并执行此操作：

完成上述操作后，我通常会再次选择一个标签，然后下拉菜单将自动保持原样，即使我将鼠标悬停到其他地方，如检查元素等。

您可以在检查菜单下拉元素时刷新浏览器以恢复正常状态。

希望这会有所帮助。 :)

【讨论】：

天才:)。这允许检查 javascript 显示的悬停。
很好，它比我原来的答案更好。

【解决方案4】：

您也可以在 javascript 控制台中执行此操作：

$('#foo').trigger('mouseover');

将元素“冻结”在“悬停”状态。

【讨论】：

【解决方案5】：

这是我在没有 CSS 更改或 JS 在 Chrome 中暂停的情况下执行此操作的方法（我在 Mac 上，如果您在 Win 上运行，我面前没有 PC）：

打开您的开发者控制台。
暂时不要启用悬停检查工具，而是通过将鼠标移到所需的子菜单上来打开它。
点击 Command+Shift+C (Mac) 或 Ctrl+Shift+C (Win/Linux)

现在悬停检查工具将应用于您在子导航中打开的元素。

【讨论】：

【解决方案6】：

不确定它是否存在于以前的浏览器版本中，但我刚刚发现了这个非常简单的方法。

在 chrome 或 Firefox 中打开检查器，右键单击您感兴趣的元素，然后选择适当的选项（在本例中：悬停）。这将触发关联的 CSS。

来自 Firefox 55 和 chromium 61 的屏幕截图。

【讨论】：

遗憾的是，它不适用于 :hovered 元素上的复杂内容。它只触发 CSS 伪类状态。有效地启用所涉及的 css。但它不会触发 javascript 事件。最初的问题是要能够在这种情况下进行调试。请参阅我在最受好评的答案（不是接受的答案）中的评论，以获取有关如何在 Chrome 和 Firefox 中执行此操作的更多提示。
在 Firefox Inspector 中，我用鼠标右键单击该元素，然后选择 Change Pseudo -class > hover

【解决方案7】：

我需要这样做，但我试图检查的元素是根据另一个元素的悬停状态动态添加和删除的。我的解决方案类似于this one，但这对我来说不太适用。

这就是我所做的：

添加简单脚本以在触发您关注的悬停事件的元素的mouseover 时进入调试器模式。

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

然后，在 Chrome 中打开开发控制台，将鼠标悬停在您的元素上，您将进入调试器模式。导航到开发工具的源部分，然后点击“恢复脚本执行”按钮（下方蓝色的类似播放按钮）。

一旦你这样做了，你的 DOM 将暂停在悬停状态，你可以使用元素检查器检查所有元素，因为它们存在于该状态。

【讨论】：

【解决方案8】：

如果由于某种原因您遇到脚本暂停问题，我找到了一种非常简单的方法：

在“检查”选项卡上打开开发工具。
悬停以显示弹出窗口。
右键单击弹出窗口中的所需元素，然后按“Q”（在 Firefox 中）检查该元素。
使用键盘导航：
- 向上/向下箭头：在元素之间移动
- 左/右箭头：折叠/展开
- Tab/Shift+Tab：在检查器和 CSS 规则之间以及 CSS 规则内部移动
- 输入：编辑 CSS 规则

【讨论】：

【解决方案9】：

好东西！

感谢 gmo 的建议。我不知道这些属性设置是否有很大帮助。

作为对措辞的一个小修改，我将解释该过程如下：

右键单击要设置样式的元素
- 打开“检查”工具
- 在右侧，导航到小样式选项卡
- 在 CSS 样式表内容上方找到
- 选择 .hov 选项 - 这将为您提供所有设置可用于选定的 HTML 元素
- 单击并将所有选项更改为非活动状态
- 现在选择您想要调整的状态 - 激活其中任何一个后，您的样式表将直接跳转到这些设置：

Styles - Tweaking Filters - Interactive elements

这些信息对我来说是救命稻草，不敢相信我刚刚听说过！

【讨论】：

这是 chrome 的最佳方式！
太好了，我的回复对您有帮助吗？

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

打开检查元素

现在转到右侧的元素并选择悬停

它将显示所有悬停效果

【讨论】：

【解决方案12】：

您可以使用 Firefox Devtools 来调整 悬停状态：

The way to see hover state with Firefox Devtools 在 YouTube 上。

【讨论】：

【解决方案13】：

更改 CSS，以便在您处理它时不应用隐藏菜单的属性，这就是我所做的。

【讨论】：

哦，拜托，我特意说了没有做这样的修改。
您说它不会“一旦激活就一直弹出”我建议删除所有激活触发器，以便它始终可见。这就是我做所有弹出菜单的方式，否则这是一个痛苦的世界。但把自己搞砸了:)