如何在Firefox中检查mouseover事件触发的悬浮元素？

哈哈，这个场景我太熟悉了！用mouseover事件触发的悬浮元素，不像CSS hover那样稳定，右键检查时鼠标一移开就消失，给你几个亲测有效的解决方案：

方法一：暂停脚本执行（最推荐） #

这是最稳妥的办法，直接让页面脚本停住，阻止mouseout这类隐藏元素的事件触发：

• 先打开Firefox开发者工具（快捷键：F12 或 Ctrl+Shift+I）
• 切换到「调试器」面板（就是那个小虫子图标）
• 把鼠标移到能触发悬浮元素的目标上，不要移开，快速按下F8（或者点击调试器里的「暂停/继续」按钮）暂停脚本执行
• 现在脚本彻底停了，悬浮元素会一直保持显示状态，你可以放心右键选择「检查」，或者在元素面板里随意查看它的结构和样式

如果手速不够，可以提前设置DOM断点：

• 先找到触发悬浮的父元素（比如按钮、导航项），在元素面板里右键它，选择「中断子树修改」或「中断属性变更」
• 再触发悬浮元素，页面会自动暂停脚本，此时悬浮元素不会消失，直接检查即可

方法二：控制台强制显示元素 #

如果你大概知道悬浮元素的选择器（比如类名、ID），可以用控制台强制让它保持显示：

• 先触发悬浮元素，立刻在控制台输入类似代码：

  document.querySelector('.your-tooltip-class').style.display = 'block'
  // 或者根据元素的隐藏方式调整，比如 visibility: visible
  

• 也可以尝试用元素选择工具快速捕捉：按下Ctrl+Shift+C激活选择工具，在悬浮元素出现的瞬间点击它，有时候能成功选中并锁定元素

方法三：临时移除隐藏事件 #

如果能找到绑定的mouseout或mouseleave事件，可以临时移除它：

• 在控制台找到触发悬浮的元素，执行移除事件的代码：

  // 假设触发元素有类名 trigger，事件处理函数叫 hideTooltip
  document.querySelector('.trigger').removeEventListener('mouseout', hideTooltip)
  

不过这个方法需要知道事件处理函数的具体名称，相对麻烦，优先级不如前两个高

内容的提问来源于stack exchange，提问作者AngryHacker