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

学习文章要努力，但是不要急！今天的这篇文章《网页 F12 调试模式下如何查看鼠标悬浮才出现的 DOM 元素？ 》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

通过 F12 调试查看鼠标悬浮显示的 DOM 元素

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

回答：

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

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

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

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

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

到这里，我们也就讲完了《网页 F12 调试模式下如何查看鼠标悬浮才出现的 DOM 元素？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！