检查仅在鼠标悬停/进入其他元素时才会显示的元素 [英] Inspect element that only appear when other element is mouse overed/entered

问题描述

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

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery's mouseenter event.

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

I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element.

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

Is there a way to pause JS events so I could hover on the element, then pause the browser's JS, and successfully inspect it?

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

For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.

推荐答案

在Chrome 38.0.2094.0中相当简单.

It's fairly easy in Chrome 38.0.2094.0.

这是它的样子:

分步操作:

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

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

If the tooltip shows up because of CSS, here's what you can do in that case:

分步操作:

1. 打开DevTools
2. 在开发工具(链接)中选择触发元素
3. 右键单击，然后选择力元素状态"，然后选择:hover"
4. 检查CSS工具提示

这篇关于检查仅在鼠标悬停/进入其他元素时才会显示的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！