“检查”悬停元素？

Question

注意：我已经阅读了类似的主题，但没有一个我的问题 - 我可以直接点击它，它就会消失。

我发现“Inspect Element”在Chrome中是一个非常宝贵的工具，但是我最新的尝试，因为我学习了许多人已经拥有的向导方式，看到我为导航栏上的元素创建了一个子菜单，该子菜单在下面弹出悬停它的父项。

弹出窗口（或向下）的样式并不是我喜欢的样式，所以我右键单击＆gt;检查元素，看看究竟是从哪里来的，并更好地了解如何达到我想要的效果。

但是，只要我将鼠标从菜单移开，它就会消失。

因此，我无法在检查窗格中选择不同的元素，并查看同时突出显示的区域。

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

Answer 1

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

以下是您在Chrome中的操作方式。我确定Firefox有一个相同的程序：

1. 打开开发人员工具并转到“来源”。

2. 请注意暂停脚本执行的快捷方式 - F8 。

   

3. 与UI交互以显示元素。

4. 点击 F8 。
5. 现在你可以移动鼠标，检查DOM，无论如何。该元素将留在那里。

Answer 2

如果使用hover给出了CSS效果，那么我通常会使用两个选项来获取此效果：

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

两个，hover effect keep hover effect即使鼠标不在HTML element之上，打开检查员，转到Styles TAB，然后点击右上方的图标即可说Toggle Element State ...（带箭头的虚线矩形）您可以使用提供的复选框手动激活Hover Event（等等）。

如果根本不清楚，请告诉我，我可以添加一些截图。 已修改：已添加屏幕截图。

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

希望它有所帮助。

Answer 3

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

完成上述操作后，我会再次选择一个标签，然后即使我将鼠标悬停到其他地方（例如Inspect Element等），下拉列表也会自动保持原样。

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

希望这会有所帮助。 ：）

Answer 4

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

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

将会＆＃34;冻结＆＃34; ＆＃34; hover＆＃34;中的元素状态。

Answer 5

以下是我在Chrome中没有CSS更改或JS暂停的方式（如果您在Win上运行，我在Mac上并且没有PC在我面前）：

1. 打开您的开发者控制台。
2. 不要启用悬停检查工具，而是将鼠标移到它上面打开所需的子菜单。
3. 点击命令 + Shift + C （Mac）或 Ctrl + Shift + C （Win / Linux）

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

Answer 6

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

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

来自Firefox 55和铬61的截图。

Answer 7

我需要这样做，但是我尝试检查的元素是根据另一个元素的悬停状态动态添加和删除的。我的解决方案与this one类似，但对我而言并不奏效。

这就是我所做的：

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

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

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

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

Answer 8

优秀的东西！

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

作为措辞的一个小修订，我会解释这个过程如下：

• 右键单击要设置样式的元素

  • 打开'Inspect'工具

  • 在右侧，导航至小样式标签

  • 找到CSS样式表内容

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

  • 点击并将所有选项更改为无效

  • 现在选择您要调整的状态 - 在激活其中任何一个状态时，您的样式表会直接跳转到这些设置：

Styles - Tweaking Filters - Interactive elements

这些信息对我来说是一种救星，简直不敢相信我刚刚听说过它！

Answer 9

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

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

Answer 10

更改CSS，以便在您处理菜单时不会应用隐藏菜单的属性。