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

问题描述:

我经常想检查一个元素(例如工具提示),该元素仅在鼠标悬停/输入另一个元素时才会出现.通过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工具提示