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

通过 f12 调试查看鼠标悬浮显示的 dom 元素

问题：
如何在网页 F12 调试模式下查看鼠标悬浮才会出现的 DOM 元素？

回答：

根据元素出现的方式不同，有两种查看方法：

1. CSS 控制的元素：
对于由 CSS 控制的元素，可以强制打开其 :hover 伪类。在 FireFox 浏览器中，步骤如下：

• 打开开发者工具。
• 选择需要鼠标悬浮的元素。
• 在样式编辑器中，展开 "CSS 规则"，在 "过滤的规则" 输入框中输入 :hover。

2. JS 控制的元素：
以思否网站的按钮提示框为例：

• 将开发者工具调整为独立窗口模式。
• 选择按钮提示框的上级元素（按钮）。
• 将鼠标悬浮在按钮上。
• 按下 Tab 键，此时将会选中新出现的元素（按钮提示框）。

以上就是网页 F12 调试模式下如何查看鼠标悬浮才出现的 DOM 元素？的详细内容，更多请关注硕下网其它相关文章！