javascript 检查仅在鼠标悬停/输入其他元素时出现的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24790002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inspect element that only appear when other element is mouse overed/entered
提问by Don P
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.
我经常想检查一个元素（例如工具提示），该元素仅在鼠标悬停/输入另一个元素时出现。出现的元素通过 jQuery 的 mouseenter 事件可见。
I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element.
我无法检查工具提示，因为当我的鼠标离开包含元素时工具提示会消失。
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?
有没有办法暂停 JS 事件，以便我可以将鼠标悬停在元素上，然后暂停浏览器的 JS 并成功检查它？
For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.
例如，尝试检查 Twitter 引导程序的工具提示：http: //getbootstrap.com/javascript/#tooltips。
回答by Some Guy
It's fairly easy in Chrome 38.0.2094.0.
在 Chrome 38.0.2094.0 中这相当容易。
Here's what it'll look like:
这是它的样子：
Step-by-step:
一步步：
- Open the DevTools in the Sources panel
- Make the tooltip appear by hovering over the button
- Press F8 to freeze the page
- Switch to the Elements panel and use the magnifying glass icon in the top left to select the tooltip
- 在 Sources 面板中打开 DevTools
- 通过将鼠标悬停在按钮上使工具提示出现
- 按F8冻结页面
- 切换到 Elements 面板并使用左上角的放大镜图标选择工具提示
If the tooltip shows up because of CSS, here's what you can do in that case:
如果由于 CSS 出现工具提示，则在这种情况下您可以执行以下操作：
Step-by-step:
一步步：
- Open the DevTools
- Select the triggering element in the dev tools (the link)
- Right click, and select "force element state", and select ":hover"
- Inspect the CSS tooltip
- 打开开发者工具
- 在开发工具中选择触发元素（链接）
- 右键单击，然后选择“力元素状态”，然后选择“：悬停”
- 检查 CSS 工具提示
回答by z??s u????s
Both Safari's and Chrome's Web Inspector offers checkboxes where you can toggle the :active, :focus, :hoverand :visitedstate of an element. Using those might be even easier.
无论Safari的和Chrome的Web检查提供的复选框，您可以切换的:active，:focus，:hover和:visited元素的状态。使用这些可能更容易。
Safari:
苹果浏览器：
Chrome:
铬合金：
回答by Nicolas Forney
There's also another tricky way to do it :
还有另一种棘手的方法：
- Go over the element which makes your tooltip appear.
- Right click to open the contextual menu.
- Move your mouse to your dev tool window and left click anywhere in the dev tool panel.
- 浏览使您的工具提示出现的元素。
- 右键单击以打开上下文菜单。
- 将鼠标移到开发工具窗口，然后左键单击开发工具面板中的任意位置。
Your tooltip will stay visible, you will then be able to inspect it in the Element tab.
您的工具提示将保持可见，然后您将能够在“元素”选项卡中检查它。
Tested on Chrome. Doesn't seem to work on Firefox.
在 Chrome 上测试。似乎不适用于 Firefox。
回答by blgt
While @SomeGuy's answeris excellent (t-up for animated gifs), as an alternative you can always do it programmatically. Just pop open the console and type in the event name
虽然@SomeGuy 的回答非常好（动画 gif 的 t-up），但作为替代方案，您始终可以通过编程方式进行。只需打开控制台并输入事件名称
document.getElementById('id').dispatchEvent(new Event('event-type'));
(with pure javascript specific syntax may vary by browser)
（纯 javascript 特定语法可能因浏览器而异）
Even easier with jQuery:
使用 jQuery 更容易：
$('#id').trigger('event-type');
In your example (http://getbootstrap.com/javascript/#tooltips), open the console and type in, for example:
在您的示例 ( http://getbootstrap.com/javascript/#tooltips) 中，打开控制台并输入，例如：
$("button:contains('Tooltip on right')").mouseenter();
And the tooltip appears in the DOM and can be manually inspected/modified:
工具提示出现在 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>
As in the comments, if you move the mouse pointer over the page frame, you can trigger other events such as mouseout. To prevent this you can press F8(as in the acc. answer) or type debugger;(which is its script equivalent)
如评论中所述，如果将鼠标指针移到页面框架上，则可以触发其他事件，例如mouseout. 为了防止这种情况，您可以按F8（如在 acc. 答案中）或键入debugger;（这是它的脚本等效项）
