“检查”一个悬浮元素？

注意: 我读过类似的帖子，但都不是我的问题——我可以右键点击它，它就消失了。

我发现“检查元素”在 Chrome 中是一个非常有价值的工具，但是我在使用它作为导航栏中某个元素的子菜单时遇到了麻烦，导航栏在其父元素的鼠标悬停时会弹出。

弹出窗口(或向下)并不是我想要的样式，所以我右键单击 > 查看元素，看看到底是从哪里来的，并得到一个更好的想法，如何实现我想要的效果。

但是，一旦我将鼠标从菜单中移开，它就消失了; 因此，我无法在检查窗格中选择不同的元素，也无法看到同时突出显示的是哪个区域。

有没有办法绕过这一点，而不改变菜单，使它保持“弹出”一旦激活？

147932 次浏览
小开

改变 CSS，以便隐藏菜单的属性不被应用，而你的工作是我所做的。

小开

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

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

enter image description here

第二，对于 keep，即使鼠标没有在 HTML element上，打开检查器，转到 Styles TAB，点击右上角的图标，上面写着 Toggle Element State... (带箭头的虚线矩形)在那里，你可以手动激活 Hover Event(其中)与提供的复选框。

enter image description here

如果一点也不清楚，让我知道，我可以添加一些截图。 编辑 : 截图添加。

最后，正如我在开头所说的，我只能在 hover设置为 CSS:HOVER的情况下才能做到这一点... 例如，当你用 jQuery.onMouseOver控制 hover state时，只能(有时)使用方法 One。

希望能有帮助。

小开

对我有效的方法是选择一个我想要检查的特定标签，然后这样做:

enter image description here

完成上述操作后，我将再次选择标记，然后下拉列表将自动保持原样，即使当我鼠标移动到其他位置，如 InspectElement 等。

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

希望这对你有帮助。 :)

小开

您也可以在 javascript 控制台中完成这项工作:

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

一个将“冻结”元素的“悬停”状态。

小开
最佳答案

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

下面是你在 Chrome 中的操作步骤，我相信 Firefox 也有类似的程序:

  1. 打开开发工具并访问源代码。

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

    Pause script execution

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

  4. 按 F8。
  5. 现在你可以移动你的鼠标，检查 DOM，无论什么。元素将留在那里。
小开

下面是我如何在没有 CSS 更改或者在 Chrome 中 JS 暂停的情况下做到这一点(我在 Mac 上，如果你在 Win 上运行，我面前就没有 PC) :

  1. 打开开发人员控制台。
  2. 不要启用悬停检查工具，而是通过移动鼠标打开你想要的子菜单。
  3. 按 Command + Shift + C(Mac)或 Ctrl + Shift + C(Win/Linux)

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

小开

好东西！

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

作为对措辞的一个小小修改，我将对这一进程作如下解释:

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

    • 打开“检查”工具

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

    • 上面是 CSS 样式表的内容

    • 选择. hov 选项-这会给你所有的设置 可用于选定的 HTML 元素

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

    • 现在选择您想要调整的状态-当激活这些设置时，您的样式表将直接跳转到这些设置:

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

这个信息对我来说是一个救命稻草，不能相信我刚刚听说它！

小开

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

在 chrome 或 Firefox 中打开检查器，右键单击您感兴趣的元素，然后选择适当的选项(在本例中为: hover)。 这将触发相关的 CSS。

Opening the menu in chromium Opening the same menu in Firefox

来自 Firefox 55和 Chromium 61的截图。

小开

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

我是这么做的:

  1. 添加简单的脚本，在触发所关心的悬停事件的元素的 mouseover上进入调试器模式。
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
  1. 然后，在 Chrome 中打开 dev 控制台，将鼠标悬停在元素上，然后进入调试器模式。导航到 dev 工具的源代码部分，然后单击“ Resume script execute”按钮(下面类似于蓝色的按钮)。

enter image description here

这样做之后，DOM 将在悬停状态中暂停，您可以使用元素检查器检查处于该状态的所有元素。

小开

我找到了一个非常简单的方法来实现这一点，如果出于某种原因，你有问题的脚本暂停:

  1. 打开开发工具在“查看”-tab。
  2. 悬停以使弹出窗口显示。
  3. 右键单击弹出窗口中所需的元素，然后按“ Q”(在 Firefox 中)检查该元素。
  4. 使用键盘导航: < ul > < li > 向上/向下箭头: 在元素之间移动
  5. 向左/向右箭头: 折叠/展开
  6. Tab/Shift + Tab: 在检查器和 CSS 规则之间以及 CSS 规则内部移动
    7. < li > 输入: 编辑 CSS 规则

小开
  1. 打开检查元素

enter image description here

  1. 现在转到右边的元素并选择鼠标悬停

enter image description here

它会显示所有的悬停效果


提交答案