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

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何在网页 F12 调试中查看鼠标悬停时才出现的 DOM 元素？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

如何在网页 f12 调试中查看鼠标悬停时才出现的 dom 元素？

在 f12 调试模式下，鼠标悬停时才出现的 dom 元素无法通过直接选择查看。解决方法根据显示原理的不同而有所区别：

1. css 控制的元素

强制开启悬停状态：在 firefox 浏览器中，可以通过在开发者工具中手动开启选中元素的 :hover 伪类来强制显示鼠标悬停效果：

<img src="https://segmentfault.com/img/bvc9qpu" alt="firefox 悬停效果强制开启">

2. js 控制的元素

定位隐藏元素：对于由 javascript 控制的元素，需要使用以下步骤在开发者工具中定位隐藏元素：

• 将开发者工具设置为独立窗口模式。
• 选中隐藏元素的父元素。
• 将鼠标悬停在隐藏元素上。

• 按下 tab 键，开发者工具将自动选中刚出现的隐藏元素：

  <img src="https://segmentfault.com/img/bVc9Qoz" alt="隐藏元素定位 1">
  <img src="https://segmentfault.com/img/bVc9QoM" alt="隐藏元素定位 2">

本篇关于《如何在网页 F12 调试中查看鼠标悬停时才出现的 DOM 元素？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！