如何避免鼠标悬浮子元素时触发父元素的:hover状态？

先来看复现这个现象的完整代码：

HTML代码 #

<div id="parent">
 <div id="child-left"></div>
 <div id="child-right"></div>
</div>

CSS代码 #

#parent { background: green; width: 100px; height: 100px; position: relative; margin: 0 auto; }
#parent:hover { background: rgba(0, 0, 0, 0.8); }
#child-left { background: red; width: 50px; height: 50px; position: absolute; top: 0; left: -50px; }
#child-right { background: red; width: 50px; height: 50px; position: absolute; top: 50px; left: 100px; }

JavaScript代码 #

const parent = document.getElementById('parent')
parent.onmouseover = function testAlert(e) { /* alert('parent') */ }
const childRight = document.getElementById('child-right')
childRight.onmouseover = function f(e) { e.stopPropagation() /* alert('child-right') */ }
const childLeft = document.getElementById('child-left')
childLeft.onmouseenter = function f(e) { e.stopPropagation() /* alert('child-right') */ }

实际测试你会发现：当鼠标悬浮在红色子元素上时，绿色父元素的CSS :hover状态仍会被触发，父元素背景会变成深灰色。虽然我们用e.stopPropagation()阻止了JS事件冒泡，但这只能阻止父元素的JSmouseover事件执行，完全无法改变CSS的:hover行为。

这背后的核心原因是：CSS的:hover状态判定和JS的事件冒泡是两个完全独立的机制

• CSS的:hover是基于鼠标指针的“命中区域”来判断的：子元素默认属于父元素的布局范围延伸，只要鼠标落在子元素上，浏览器就会认为鼠标也在父元素的范围内，因此触发父元素的:hover状态。
• stopPropagation()仅仅作用于JS事件的传播链条，它只能阻止事件从子元素冒泡到父元素，让父元素对应的JS事件回调不执行，但对CSS的状态判定逻辑没有任何影响。

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