:hover作用于父元素可样式化子元素，如.parent:hover .child；CSS无法反向选中父级，需调整结构或用JS；:hover为瞬态伪类，不支持悬停后保持状态，移动端慎用。
hover 作用在父元素上，样式应用到子元素
直接写 .parent:hover .child 就能实现：鼠标悬停在父容器时，修改其内部子元素的样式。这是最常用也最可靠的方案，浏览器兼容性好（IE9+），不需要 JS 干预。
常见错误是误以为必须给子元素加 :hover，其实完全不需要——伪类只写在触发条件的元素上（即父级），选择器右边自然匹配目标子元素。
-
.card:hover .card-title→ 悬停整个卡片时高亮标题 -
nav:hover a→ 悬停导航栏区域时统一设置所有链接颜色 - 注意空格不能省：
.parent:hover.child（无空格）匹配的是“同时具有两个 class 的同一个元素”，不是父子关系
需要 hover 子元素才影响父元素？CSS 做不到
CSS 选择器只能向下或向同级查找，无法“向上选中父元素”。比如想实现“鼠标移到按钮上，让它的父容器变背景色”，纯 CSS 没有 :parent 或类似机制。
此时必须换思路：
立即学习“前端免费学习笔记（深入）”；
- 把
:hover放在父容器上，通过更精确的子选择器定位目标按钮（例如.container:hover .trigger-btn） - 用 JS 监听子元素
mouseenter，动态添加 class 到父级 - 调整 HTML 结构，让逻辑上“被影响的父级”实际是视觉上的兄弟或后代（例如用 flex 容器包裹并控制对齐）
hover 触发后保持状态？CSS 本身不支持
:hover 是瞬态伪类，移开鼠标立即失效。如果希望悬停后样式“停留”，比如下拉菜单展开后不随鼠标离开关闭，这已超出 :hover 能力范围。
可行做法：
- 改用
:focus-within配合tabindex，让键盘用户也能操作，且焦点存在时样式持续 - 用 JS 切换 class，例如点击时加
.is-open，再用.menu.is-open .submenu控制显示 - 部分场景可用
:has()（Chrome 105+、Safari 15.4+），如.dropdown:has(.trigger:hover) .menu，但目前兼容性仍有限制
移动端 touch 设备的 hover 行为不可靠
很多触摸设备（尤其是 iOS Safari）对 :hover 有延迟、触发异常或干脆忽略。不要依赖它做核心交互，比如“悬停显示操作按钮”在手机上大概率不出现。
稳妥方案：
- 用
@media (hover: hover)包裹 hover 样式，确保只在支持悬停的设备上生效 - 关键功能必须提供点击/触摸入口，hover 仅作为增强体验（如加过渡动画）
- 避免写
div:hover { display: none }这类会破坏可访问性的规则
.card {
padding: 1rem;
border: 1px solid #ddd;
}
.card:hover .card-title {
color: #007bff;
font-weight: bold;
}
.card:hover .card-desc {
opacity: 1;
}
hover 的本质是“条件匹配”，不是“事件监听”。真正容易被忽略的是：它不改变 DOM 结构、不触发重排（除非样式本身引起）、也不产生任何 JS 可捕获的事件——它只是 CSS 引擎在每一帧做的快速选择器匹配。 
