检查仅在鼠标悬停/输入其他元素时出现的元素

Posted 2023-03-06

【中文标题】检查仅在鼠标悬停/输入其他元素时出现的元素

【英文标题】：Inspect element that only appear when other element is mouse overed/entered

【发布时间】：2014-09-07 12:36:58

【问题描述】：

通常我想检查一个元素（例如工具提示），该元素仅在鼠标悬停/进入另一个元素时出现。出现的元素通过 jQuery 的 mouseenter 事件可见。

我无法检查工具提示，因为当我的鼠标离开包含元素时，工具提示会消失。

有没有办法暂停 JS 事件，以便我可以将鼠标悬停在元素上，然后暂停浏览器的 JS，并成功检查它？

例如，尝试检查 Twitter 引导的工具提示：http://getbootstrap.com/javascript/#tooltips。

【问题讨论】：

仅供参考，如果元素出现是因为 CSS 而不是 JS，您可以通过在开发工具的元素 (DOM) 视图中右键单击元素，选择“强制元素状态”，然后是“:hover”。

【参考方案1】：

在 Chrome 38.0.2094.0 中相当容易。

如下所示：

一步一步：

在 Sources 面板中打开 DevTools 将鼠标悬停在按钮上以显示工具提示 按 F8 冻结页面 切换到“元素”面板并使用左上角的放大镜图标选择工具提示

如果工具提示是由于 CSS 而出现的，那么在这种情况下您可以执行以下操作：

一步一步：

打开开发工具 在开发工具中选择触发元素（链接） 右键，选择“force element state”，选择“:hover” 检查 CSS 工具提示

【讨论】：

@YuriyGalanter 可以通过左上角的望远镜图标获得。只需点击图标，然后点击工具提示 :)

是的，我添加了一个 GIF 以便更容易看到我在做什么。

@DonnyP 我使用了byzanz-record。这是一个你可以通过sudo apt-get install byzanz获得的包。

还有LICEcap，它直接将屏幕的一部分记录在一个超级优化的GIF中。 Windows、OS X 和 Linux。

@bfred.it LICEcap 不可用于 Linux。 See this Github issue 关于这个话题。似乎人们使用WINE 成功运行它。

【参考方案2】：

Safari 和 Chrome 的 Web Inspector 都提供了复选框，您可以在其中切换元素的 :active、:focus、:hover 和 :visited 状态。使用这些可能会更容易。

Safari：

铬：

【讨论】：

:hover 样式不会触发工具提示。

Firefox 上的 Firebug 具有相同的功能（减去 :visited，这是为了防止窥探） - 在 html 选项卡上，它位于右侧的“样式”下拉列表中

@Izkata 对于 Firefox 的原生开发人员工具，右键单击面包屑或 HTML/DOM 树中的元素，然后从:hover、:active 或:focus 中进行选择。

【参考方案3】：

还有另一种棘手的方法：

查看使您的工具提示出现的元素。 右键单击以打开上下文菜单。 将鼠标移至开发工具窗口，然后左键单击开发工具面板中的任意位置。

您的工具提示将保持可见，然后您将能够在“元素”选项卡中对其进行检查。

在 Chrome 上测试。似乎不适用于 Firefox。

【讨论】：

这就是我过去的做法，但@SomeGuy 的回答是最好和最简单的方法。

@JohnDubya 不，真的不是。这可能是官方的方式，但肯定不会更容易。涉及的步骤太多了。

这是我通常做的，但并不总是有效。

【参考方案4】：

虽然@SomeGuy's answer 非常棒（动画 gif 的 t-up），但作为替代方案，您始终可以以编程方式进行。只需弹出控制台并输入事件名称即可

document.getElementById('id').dispatchEvent(new Event('event-type'));

（纯javascript特定语法可能因浏览器而异）

使用 jQuery 更容易：

$('#id').trigger('event-type');

在您的示例 (http://getbootstrap.com/javascript/#tooltips) 中，打开控制台并输入，例如：

$("button:contains('Tooltip on right')").mouseenter();

并且工具提示出现在 DOM 中，可以手动检查/修改：

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

---

与在 cmets 中一样，如果将鼠标指针移到页框上，则可以触发其他事件，例如 mouseout。为了防止这种情况，您可以按 F8 （如在 acc. 答案中）或输入 debugger; （这是它的脚本等效项）

【讨论】：

在检查元素的同时，您仍然可以触发其他事件（如mouseout），因此它首先不能解决问题。选择它时必须非常小心。但这是一种替代方法。