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

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

回答:

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

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

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

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

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

以上就是网页 F12 调试模式下如何查看鼠标悬浮才出现的 DOM 元素?的详细内容,更多请关注慧达安全导航其它相关文章!

点赞(0)

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部