“检查”悬停元素？

注意：我读过类似的主题，但是我的问题完全没有-我可以右键单击它，然后它消失。

我发现“检查元素”是Chrome中的宝贵工具，但是当我了解到许多人已经掌握的向导方式后，我的最新尝试是我在导航栏上为该元素创建了一个子菜单，将其悬停在下方时会弹出该菜单。父项。

弹出窗口（或向下弹出窗口）的样式不是我想要的，因此我右键单击> inspect元素以查看确切来自何处，并更好地了解如何实现所需的效果。

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

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

是否有解决此问题的方法，而不更改菜单，使菜单一旦激活就保持“弹出”状态？

如果hover效果是CSS肯定的，那么我通常使用两个选项来实现：

一，到see了hover effect当鼠标离开hover area：
在停靠窗口打开检查，并增加宽度，直到达到你的HTML element，然后点击右键，在弹出菜单中必须在检查区......那么当你将鼠标移动到检查员视图，hover effect保持激活状态。

二，到keep了hover effect即使鼠标还没有结束HTML element，打开检查，去Styles TAB，然后点击右上角的图标，说Toggle Element State...（虚线的矩形有一个箭头）在那里，你可以手动激活Hover Event（等等）与提供的复选框。

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

最后，正如我在开始时所说的，例如，当您hover将CSS:HOVER... 设置为...时，只有在控制hover statewith jQuery.onMouseOver的情况下，才可以（有时）使用方法One。

希望能帮助到你。

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

这是您在Chrome浏览器中的操作方法。我确定Firefox具有等效的过程：

1. 打开开发人员工具，然后转到“源代码”。

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

   

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

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

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

完成上述操作后，我通常会再次选择该标签，然后即使将鼠标悬停在其他位置（如Inspect Element等）上，下拉菜单也会自动保持原样。

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

希望这可以帮助。:)

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

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

会“冻结”处于“悬停”状态的元素的。

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

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

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

不知道它是否存在于以前的浏览器版本中，但是我才发现这种极其简单的方法。

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

Firefox 55和Chrome 61的屏幕截图。

优秀的东西！

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

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

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

  • 打开“检查”工具

  • 在右侧，导航到小的“样式”选项卡

  • 在上面的CSS样式表内容中找到

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

  • 单击并将所有选项更改为非活动状态

  • 现在，选择您想要调整的状态-激活任何一种状态后，您的样式表都会直接将您跳到这些设置：

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

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

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

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

所以这就是我所做的：

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

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

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

完成此操作后，您的DOM将在悬停状态下暂停，您可以使用元素检查器检查该状态下存在的所有元素。