如何调试 Web 浏览器中鼠标悬停时出现的 DOM 元素？

如何在 web 浏览器调试中查看鼠标悬停时显示的 dom 元素

在进行 Web 开发时，有时需要调试鼠标悬停时才出现的 DOM 元素。本文将介绍这两种情况下的解决方案：

情况 1：CSS 控制

如果悬停元素由 CSS 控制，可以使用 FireFox 浏览器的以下功能强制设置 :hover 伪类：

1. 打开 FireFox 并转到要调试的页面。
2. 按 F12 打开开发者工具面板。
3. 选择“样式”选项卡。
4. 在元素树中找到所需的元素。
5. 在样式编辑器中，找到 :hover 规则并展开。
6. 点击蓝色的“强制”按钮即可强制应用伪类。

情况 2：JS 控制

如果悬停元素由 JavaScript 控制，可以使用以下步骤调试：

1. 打开开发者工具面板并切换到独立窗口模式。
2. 在元素树中选择元素的上级元素。
3. 将鼠标悬停在目标元素上。
4. 按 Tab 键选择新出现的元素。

以上就是如何调试 Web 浏览器中鼠标悬停时出现的 DOM 元素？的详细内容，更多请关注硕下网其它相关文章！