在网页调试过程中，常常会遇到一些鼠标悬停才显示的 DOM 元素，如何有效地查看这些元素对于开发者来说至关重要。下面就为大家详细介绍几种实用的方法。

利用浏览器自带的开发者工具是最常用的方式。以 Chrome 浏览器为例，当打开网页后，按下 F12 键即可调出开发者工具。然后将鼠标移动到需要查看的悬停显示区域，在开发者工具的 Elements 面板中，通过鼠标指针工具，即“选择元素以检查”按钮 ，当鼠标指针移到该区域时，对应的 DOM 元素会在面板中高亮显示。不过，由于元素是悬停才显示，当鼠标离开，元素消失，就很难定位到准确的代码位置。这时候，可以利用断点功能。在 Elements 面板中找到可能与悬停效果相关的 CSS 选择器，右键点击选择“Break on > Hover”。再次将鼠标悬停在该区域时，页面会暂停在触发悬停效果的代码位置，此时就能在 Elements 面板中轻松查看和分析相关的 DOM 元素了。

另外一种方法是通过修改 CSS 样式来让元素始终显示。在开发者工具的 Styles 面板中，找到控制该元素显示或隐藏的 CSS 属性，比如“display: none”或者“opacity: 0”等。将这些属性的值修改为让元素可见的状态，例如将“display: none”改为“display: block” 。这样，元素就会一直显示在页面上，方便直接在 Elements 面板中查看其 DOM 结构。

还有一些专门的调试工具也能帮助我们。例如 Puppeteer，它是一个 Node.js 库，可以通过编写代码来模拟鼠标悬停操作，并获取相关的 DOM 信息。通过编写简单的脚本来控制浏览器，实现悬停动作，然后利用 Puppeteer 的 API 来获取当前页面的 DOM 结构，从而找到目标元素。

掌握这些查看鼠标悬停才显示的 DOM 元素的方法，能大大提高网页调试的效率，帮助开发者更快地定位和解决问题，提升开发质量和用户体验。