检查只有当其他元素是鼠标上/进入时出现的元素

通常我想检查一个元素（例如工具提示），只有当另一个元素是鼠标hover/进入时才会出现。 出现的元素，通过jQuery的mouseenter事件可见。

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

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

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

Answer 1

Chrome 38.0.2094.0相当简单。

以下是它的样子：

一步步：

1. 在“来源”面板中打开DevTools
2. 将鼠标hover在button上可以显示工具提示
3. 按F8键冻结页面
4. 切换到“元素”面板并使用左上方的放大镜图标select工具提示

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

一步步：

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

Answer 2

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

苹果浏览器：

铬：

Answer 3

还有另一个棘手的方法来做到这一点：

1. 浏览使您的工具提示出现的元素。
2. 右键点击打开上下文菜单。
3. 将鼠标移动到您的开发工具窗口，并在开发工具面板中的任意位置单击鼠标左键。

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

在Chrome上testing 似乎没有在Firefox上工作。

Answer 4

虽然@ SomeGuy的答案是非常好的（animationgif的t-up），作为一种替代scheme，您可以随时以编程方式进行。 只需popup打开控制台并键入事件名称

 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> 

---

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