onmouseover 会冒泡且在子元素上重复触发，导致悬停菜单闪退；onmouseenter 不冒泡、只在真正进入目标区域时触发一次，更适合菜单等稳定交互场景。
onmouseover 属性用来在鼠标指针移入元素时触发 JavaScript 代码，常用于实现悬停菜单展开、图片放大、状态提示等即时反馈效果。但它不是“菜单展开专用方案”，实际用起来容易出错，尤其在嵌套结构中。
为什么悬停菜单用 onmouseover 常会闪退或反复触发
根本原因是 onmouseover 具有事件冒泡特性，且会在子元素上重复触发。比如一个下拉菜单容器里有多个 <li>，鼠标从父项移到子项时，先触发父项的 onmouseout（离开），再触发子项的 onmouseover（进入），中间存在空白间隙，导致菜单收起又弹出。
- 它监听的是“进入任意后代元素”的行为，不是“真正进入目标区域”
- 与之对应的是
onmouseenter—— 不冒泡、只在真正进入绑定元素边界时触发一次 - 如果必须用
onmouseover，得配合event.target === event.currentTarget手动过滤 - 菜单区域之间不能留白，否则鼠标经过空白时也会触发
onmouseout
onmouseover 和 onmouseenter 的关键区别在哪
二者表面功能相似，但 DOM 行为完全不同：
-
onmouseover：冒泡，子元素触发也会向上通知父元素；适合做全局悬停监控（如统计所有可悬停区域） -
onmouseenter：不冒泡，只在鼠标真正跨过绑定元素外框时触发一次；适合菜单、工具提示等需要稳定响应的场景 - 两者都兼容 IE9+ 和所有现代浏览器，但
onmouseenter在旧版 IE 中需用attachEvent回退 - 没有
onmouseenter这个写法 —— 拼错就完全无效
怎么用 onmouseover 实现基础悬停展开（不推荐但有时绕不开）
适用于简单单层结构、无子菜单、无动画过渡的场景，例如图标悬停显示文字说明：
立即学习“前端免费学习笔记（深入）”；
<div class="icon" onmouseover="showTip(this)" onmouseout="hideTip(this)">
<span class="tooltip">编辑此项目</span>
</div>
<script>
function showTip(el) {
el.querySelector('.tooltip').style.display = 'block';
}
function hideTip(el) {
el.querySelector('.tooltip').style.display = 'none';
}
</script>
- 避免在内联属性里写多行逻辑，提取成函数更可控
- 不要直接操作
style.display，优先用 CSS 类切换（el.classList.add('hovered')） - 如果元素是动态插入的，
onmouseover内联写法不会自动绑定，得用addEventListener - 移动端没有 hover 概念，这类交互在触摸设备上基本失效
真正稳定的悬停菜单，应该用 onmouseenter/onmouseleave + CSS transition + 合理的 padding 区域包裹，而不是依赖 onmouseover 的原始行为。冒泡和频繁重绘才是它最常被忽略的副作用。
