"检查"悬停元素？

Question

注意:我已经读过类似的线程,但没有一个我的问题 - 我可以点击它就好了,它就会消失.

我发现"Inspect Element"在Chrome中是一个非常宝贵的工具,但是我最新的尝试,因为我学习了你们许多人已经拥有的巫术方式,看到我在导航栏上为一个元素创建了一个子菜单,当它悬停在它上面时弹出父项目.

弹出窗口(或者说是向下)不是我想要的样式,所以我右键单击>检查元素以查看究竟是从哪里来的,并更好地了解如何实现我想要的效果.

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

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

有没有办法解决这个问题,而不更改菜单,以便一旦激活它就会"弹出"？

Answer 1

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

以下是您在Chrome中的操作方式.我确定Firefox有一个等效的过程:

1. 打开开发人员工具并转到Sources.

2. 请注意暂停脚本执行的快捷方式.对我而言__CODE__:

   

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

4. 命中__CODE__.
5. 现在你可以移动你的鼠标,检查DOM,等等.元素将留在那里.

Answer 2

如果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.

希望能帮助到你.

Answer 3

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

完成上述操作后,我会再次选择一个标签,然后下拉菜单将自动保持原样,即使我将鼠标悬停到其他地方,如Inspect Element等.

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

希望这可以帮助.:)

Answer 4

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

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

这将"冻结"处于"悬停"状态的元素.

Answer 5

1. 打开检查元素

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

它将显示所有悬停效果

Answer 6

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

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

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

Answer 7

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

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

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