网页 F12 如何调试查看鼠标悬浮时才出现的 DOM 元素？

如何使用网页 F12 调试查看鼠标悬浮时才出现的 DOM 元素？

鼠标悬浮时出现的新 DOM 元素可能由 CSS 或 JavaScript 控制，查看方式会有所不同：

CSS 控制

对于由 CSS 伪类（如 :hover）控制的元素，可以在开发者工具中强制启用该伪类状态。例如，在 Firefox 中：

1. 打开开发者工具（F12）。
2. 选择需要悬浮的元素。
3. 在样式面板中，选中 :hover 伪类。

这样，该元素的悬浮状态就会被激活，可以查看其 DOM 结构。

JS 控制

如果新元素是由 JavaScript 动态添加的，则需要在悬浮时选中其上级元素并按下 Tab 键。以思否按钮的 tooltip 为例：

1. 将开发者工具切换到独立窗口模式。
2. 选中 tooltip 所在按钮的上级元素。
3. 将鼠标悬浮到按钮上，然后按 Tab 键。
4. 此时会选中新出现的 tooltip 元素，可以在 DOM 树中查看。