“Inspect”一个悬停元素？

Question

注意：我已经阅读了类似的主题，但没有完全解决我的问题——可以正常右键单击，但在此之后它就消失了。

我发现“检查元素”是Chrome中一种非常有用的工具，但我在使用它查看导航栏上一个元素的子菜单时遇到了问题，该子菜单会在其父项目上悬停时弹出。

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

然而，一旦我将鼠标移开菜单，它就消失了。因此，我无法在检查面板中选择不同的元素，并同时查看哪个区域被突出显示。

有没有一种方法可以解决这个问题，而不改变菜单，使其在激活后保持“弹出状态”？

- OJFord

---

在这种情况下，我通常使用控制台对页面进行临时修改，例如从父菜单中删除 mouseleave 事件。这样，即使您将鼠标移出父菜单，子菜单也应该保持打开状态。 - jbabey

Chrome 现在支持此功能。选择 UI 元素（例如标签）> 检查元素 > 样式选项卡，在筛选框旁边有一个“:hov”部分。单击它。现在，您可以选择悬停复选框并查看悬停时加载的样式。 - Dhanuka777

Answer 1

如果hover元素由JS触发（如果是由CSS触发的:hover，请参见gmo的答案），您可以在暂停脚本执行时检查它。这是一种比其他答案建议的冻结DOM的方法简单得多。您可以按照以下方式暂停脚本执行而不失去hover元素：

1. 通过键盘快捷方式

以下是在Chrome中执行此操作的方法。我相信Firefox也有类似的程序：

1. 打开开发者工具并转到“Sources”。

2. 注意暂停脚本执行的快捷键- F8 （根据您的操作系统可能还有其他快捷键）。

   

3. 与UI交互以使元素出现。

4. 按F8。

5. 现在您可以移动鼠标，检查DOM或进行其他任何操作。该元素将保留在那里。

2. 通过延迟的debugger语句

某些网页附加了keydown/keypress/keyup事件侦听器，这些侦听器会干扰上面的快捷方式。在这种情况下，您可以通过在打开hover时触发debugger语句来暂停脚本执行:

1. 打开JS控制台并输入：

   // Pause script execution in 5 seconds
   setTimeout(() => { debugger; }, 5000)
   

2. 触发悬停并等待debugger语句执行。

- mxxk

---

这里提供的其他方法在很多情况下都不起作用，而这种方法则可以。 - Ed Staub

对于Safari浏览器，它的调试工具标签是“Debugger”。 - user2661518

对我没有用。按下F8之后，屏幕会冻结，无法选择任何元素。我的解决方法是按下F8，然后切换到“元素”选项卡，在其中搜索悬停元素上的单词。 - AngryHacker

这个救了我，谢谢！对于那些说他们无法与页面交互的人，我只是通过元素选项卡找到了我需要的东西 - 尽管我正在处理仍在变化的 CSS！ - Kitson

在Firefox上它的工作方式相同，但在按下F8之前，您需要将焦点放在调试器选项卡中（该快捷键从那里起作用）。一旦暂停，您就可以检查DOM，并且所有仅在:hover状态下存在的元素都会出现。这只是在悬停元素以进行检查时按下F8的问题。如果您需要选择另一个元素，请尽量避免使用上下文菜单进行检查（可能会触发取消暂停）。使用开发工具的左上角图标来捕获它。 - Kir Kanos

Answer 2

如果使用CSS设置了hover效果，那么通常我会使用两个选项来实现此目的：

第一种，当鼠标移开悬停区域时查看悬停效果：打开停靠窗口中的检查器，并增加宽度直到达到你的HTML元素，然后右键单击，弹出菜单必须在检查器区域上方...然后当你将鼠标移动到检查器视图上时，悬停效果会在文档中保持激活。

第二种，即使鼠标不在HTML元素上方，也要保持悬停效果，打开检查器，转到“样式”选项卡，单击右上角的图标，该图标称为“切换元素状态”（带箭头的虚线矩形）那里您可以使用所提供的复选框手动激活“悬停事件”（以及其他事件）。

最后，正如我在开头所说的那样，只有当使用CSS:HOVER控制悬停状态时，我才能够做到这一点...例如当你使用jQuery.onMouseOver控制悬停状态时，只有第一种方法有时可行。

希望这有所帮助。

- gmo

---

你的第一个解决方案是一个不错的变通方法，我有一种方法可以让它更好：右键点击所选元素，将鼠标 完全移开 到"检查器区域"，然后使用 键盘方向键 进行导航，并在"检查元素"上按 Enter 键。该元素将保持悬停状态。至于你的第二个解决方案，是的，那个（或使用上下文菜单的 :hover）显然应该是正确的解决方案，但非常不幸的是，这在我记忆中一直没有在 Chrome/Firefox 上起作用... - Gilad Barner

我习惯在Windows上这样做，但在Mac上这个技巧行不通，有人找到了在Mac上实现这个的方法吗？即使鼠标在检查器或子菜单中，它似乎也会将鼠标移动事件“传递”给窗口。 - santiago arizti

@GiladBarner 谢谢你提供的快捷方式，它对我有用。我不知道这只是我的电脑上的问题还是其他原因，但我无法看到通过键盘选择的菜单选项，并且在下拉菜单可见时快捷键（ctrl-shift-I）无效，所以因为检查元素是下拉菜单中的最后一个选项，我使用向上箭头键将其包装到最后一项并按Enter键，然后它就起作用了。 - Bill Hileman

目前看来，:hover选项在“切换类选项”中。 - Sagnik Pradhan

Answer 3

对我而言有效的方法是选择要检查和配置属性修改断点的特定a标签：

在执行上述操作后，我通常会再次选择那个a标签，然后即使当我鼠标悬停到其他地方（如检查元素等）时，下拉菜单也会自动保持不变。

在检查菜单下拉元素时，只需刷新浏览器即可回到正常状态。

希望这有所帮助. :)

- Woppi

Answer 4

你也可以在JavaScript控制台中这样做：

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

一种将元素“冻结”在“悬停”状态的方法。

- pixelearth

Answer 5

1. 打开检查元素

2. 现在转到元素选项卡，在右侧选择悬停效果

它将显示所有悬停效果

- Subhabrata Banerjee

Answer 6

以下是翻译的结果，仅供参考：

以下是我在Chrome中不改变CSS或暂停JS的情况下进行操作的方法（我使用的是Mac电脑，如果您正在Windows上运行，请自行适当调整）：

1. 打开开发人员控制台。
2. 尚未启用悬停检查工具，而是通过将鼠标移动到所需的子菜单上来打开它。
3. 按下 Command+Shift+C（Mac）或 Ctrl+Shift+C（Win/Linux）

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

- Josh

Answer 7

不确定之前的浏览器版本是否存在，但我刚发现这个极其简单的方法。

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

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

- MayeulC

---

遗憾的是，它无法在:hovered元素上处理复杂的内容。它只触发CSS伪类状态，有效地启用了相关的CSS。但它不会触发JavaScript事件。最初的问题是关于能否在这种情况下进行调试。请参见我在得到最多赞同的答案（而非被接受的答案）中的评论，以获取有关如何在Chrome和Firefox中执行此操作的进一步提示。 - Kir Kanos

在 Firefox Inspector 中，我右键单击了该元素，然后选择了“更改伪类 > 悬停”。 - Nick W

Answer 8

如果由于某种原因您无法使用脚本暂停，请尝试以下非常简单的方法：

1. 在“检查”选项卡中打开Dev Tools。
2. 将鼠标悬停在弹出窗口上以使其出现。
3. 右键单击要检查的弹出窗口中的所需元素，并按“Q”（在Firefox中）来检查该元素。
4. 使用键盘进行导航：
   • 箭头上/下：在元素之间移动
   • 箭头左/右：折叠/展开
   • Tab/Shift+Tab：在检查器和CSS规则之间移动以及在CSS规则内部移动
   • Enter：编辑CSS规则

- Vodis

Answer 9

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

所以这就是我所做的：

1. 添加简单的脚本，使其在触发你所担心的悬停事件的元素的mouseover上进入调试器模式。

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

2. 在Chrome的开发者工具中打开控制台后，将鼠标悬浮在要调试的元素上，你会进入调试模式。切换到开发者工具的Sources部分，然后点击"Resume script execution"按钮（它下面是蓝色的类似播放的按钮）。

这样一来，你的DOM将会被暂停在悬停状态，你可以使用元素检查器来检查所有在该状态下存在的元素。

- tddrmllr

Answer 10

太棒了！

感谢gmo的建议。我之前不知道这些属性设置，非常有帮助。

稍作修改以下措辞：

• 右键点击您想样式化的元素

  • 打开'检查'工具

  • 在右侧，导航到小的'Styles'选项卡

  • 在CSS样式表内容上方找到

  • 选择.hov选项 - 这将为您提供所选HTML元素的所有设置

  • 单击并更改所有选项以使其无效

  • 现在选择您想要微调的状态 - 在激活其中任何一个时，您的样式表将直接跳转到那些设置:

样式-微调过滤器-交互元素

这些信息对我来说是救命稻草，简直不能相信我才刚听说它！

- Dan Haddock

---

这是Chrome的最佳方式！ - whisk

很好，我的回答对你有帮助吗？ - Dan Haddock