检查仅在鼠标悬停/进入其他元素时才会显示的元素

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

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

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

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

在Chrome 38.0.2094.0中相当容易。

外观如下所示：

一步步：

1. 在“源”面板中打开DevTools
2. 将鼠标悬停在按钮上，以显示工具提示
3. 按F8冻结页面
4. 切换到“元素”面板，然后使用左上角的放大镜图标选择工具提示

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

一步步：

1. 打开开发工具
2. 在开发工具中选择触发元素（链接）
3. 右键单击，然后选择“力元素状态”，然后选择“：hover”
4. 检查CSS工具提示

无论Safari的和Chrome的Web检查提供的复选框，您可以切换的:active，:focus，:hover和:visited元素的状态。使用这些甚至可能更容易。

苹果浏览器：

铬：

还有另一种棘手的方法：

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

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

在Chrome上测试。在Firefox上似乎不起作用。

虽然@SomeGuy的答案非常好（动画gif的提示），但您也可以始终以编程方式进行选择。只需弹出控制台，然后输入事件名称

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>

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