当两个绝对定位的 dom 元素重叠且处于同一层级时，鼠标移入上层元素会意外触发下层元素的 mouseleave。本文提供一个简洁可靠的 javascript + css 协同解决方案：通过 pointer-events: none 让上层元素“透传”鼠标事件，从而保持 mouseenter/mouseleave 的语义完整性。
当两个绝对定位的 dom 元素重叠且处于同一层级时，鼠标移入上层元素会意外触发下层元素的 mouseleave。本文提供一个简洁可靠的 javascript + css 协同解决方案：通过 pointer-events: none 让上层元素“透传”鼠标事件，从而保持 mouseenter/mouseleave 的语义完整性。
在实际开发中，常遇到这样一种布局场景：两个 <div> 元素（如主容器与悬浮控件）使用 position: absolute 定位并发生视觉重叠，但它们在 DOM 结构中是同级兄弟节点（即非嵌套关系）。此时，尽管视觉上 #smaller 位于 #myDiv 之上，浏览器仍会将鼠标进入 #smaller 视为离开了 #myDiv 的边界——导致 mouseleave 被错误触发，破坏了预期的悬停交互逻辑。
根本原因在于：mouseenter/mouseleave 是基于 DOM 层次结构的事件，而非纯粹的视觉区域判断。只要鼠标指针移入另一个独立的、可接收鼠标事件的元素（即使它在视觉上覆盖在目标元素之上），原元素就会触发 mouseleave。
✅ 推荐解决方案：对上层遮盖元素设置 pointer-events: none
该 CSS 属性可使元素完全不参与鼠标事件捕获，鼠标事件将直接穿透至其下方的元素（如 #myDiv），从而维持 mouseenter/mouseleave 的连续性和准确性。
#smaller {
border: 1px solid red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
pointer-events: none; /* 关键：透传鼠标事件 */
}配合原始 JavaScript 逻辑即可正常工作：
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', () => {
console.log('Mouse entered the div');
});
myDiv.addEventListener('mouseleave', () => {
console.log('Mouse left the div — only when truly exiting its bounds');
});⚠️ 注意事项：
- pointer-events: none 会使 #smaller 完全不可交互（无法点击、hover、获取焦点等）。若需保留其部分交互能力（如仅允许点击），应改用更精细的方案（如事件委托 + document.elementFromPoint() 判断，但复杂度显著上升）；
- 此方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥12），无需额外 polyfill；
- 不要尝试用 mouseover/mouseout 替代——它们本身具有冒泡特性且更易误触发，无法解决本问题本质；
- 若未来结构允许，将 #smaller 改为 #myDiv 的子元素，并利用 mouseenter/mouseleave 的天然层级语义，是最语义化且零样式依赖的方案；但在必须保持同级结构的前提下，pointer-events: none 是最简、最稳定的选择。
总结：面对同级元素视觉重叠引发的 mouseleave 误触发问题，无需引入复杂坐标计算或事件代理逻辑。一行 CSS 即可优雅解决——让非交互性覆盖层“隐形于鼠标事件系统”，回归 mouseenter/mouseleave 的设计本意：精确反映用户对目标元素边界的进出意图。
