根本原因是dom结构包含关系与css匹配逻辑：.parent:hover匹配鼠标落在父元素盒模型内，而子元素属其dom子树；.parent :hover（带空格）才匹配后代任一元素悬停时父元素样式生效。
不是“冒泡”，是结构包含关系导致的自然匹配——:hover 本身不冒泡，但浏览器会检查鼠标坐标是否落在某个元素及其所有祖先元素的盒模型内，只要父元素在 DOM 中包裹子元素，悬停子元素就必然也“悬停”了父元素。
为什么悬停子元素时父元素样式也生效？
根本原因在于 HTML 结构层级和 CSS 选择器匹配逻辑：
-
.parent:hover匹配的是“鼠标坐标落在.parent元素盒模型范围内”的状态，而子元素（哪怕用position: absolute移出视觉边界）仍属于.parent的 DOM 子树 - 浏览器不看视觉位置，只看 DOM 树路径 + 几何包围盒。即使子元素视觉上“飘在外面”，只要它的
offsetParent或祖先链包含.parent，悬停它就满足.parent的 :hover 条件 - 这不是 bug，是符合规范的预期行为；CSS 没有“事件”，只有“状态匹配”
.parent:hover 和 .parent :hover 的区别在哪？
这两个选择器语义完全不同，极易混淆：
-
.parent:hover：仅当鼠标直接悬停在.parent元素自身（包括其 padding/border 区域）时触发 -
.parent :hover（注意空格）：匹配.parent内部任意后代元素处于:hover状态时，.parent的样式——也就是说，只要子、孙、曾孙……任一元素被悬停，整个规则就生效 - 后者才是你看到“父元素跟着变”的真正原因；删掉空格就能切断这种级联响应
如何让子元素悬停时不触发父元素效果？
有三种实际可用的解法，按兼容性与复杂度排序：
- 最简单：改写选择器，去掉空格 → 把
.parent :hover改成.parent:hover - 更精确（现代方案）：用
:has()排除干扰 →.parent:not(:has(*:hover))可判断“内部无任何元素悬停”，但需注意 Safari 15.4+、Chrome 105+ 才支持 - 兜底方案（兼容 IE11）：用 JavaScript 监听
mouseenter/mouseleave，动态加 class 控制样式，避免依赖纯 CSS 的层级匹配
真正容易被忽略的点是：哪怕用了 pointer-events: none 在子元素上，只要它没脱离文档流（比如没设 position: fixed），父元素的 :hover 依然可能被触发——因为判定依据是鼠标坐标是否落入父元素盒模型，而非子元素是否可交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
