纯css可实现父级悬停子级变色，推荐使用.parent:hover > .child选择器；需注意移动端hover失效、内联样式覆盖及dom结构漂移等问题。
能，纯 CSS 就能实现，不需要 JavaScript。关键不是“能不能”，而是选对选择器、避开 DOM 和样式权重陷阱。
.parent:hover > .child 是最安全的写法
用 .parent:hover > .child 而不是 .parent:hover .child，前者只匹配直接子元素，语义清晰、不易误触深层嵌套；后者会命中所有后代，比如 .parent > .wrapper > .child 也会被改掉，容易失控。
-
.parent:hover > .child：推荐，尤其当你明确知道结构层级时 -
.parent:hover .child：可用，但得确认子元素没被意外包裹进其他容器里 -
.parent .child:hover：错，这是子元素自己悬停才触发，不符合“父悬停影响子”的需求
子元素 color 不变？大概率是特异性或内联样式挡路
常见现象：写了 .card:hover > .title { color: red; }，但标题颜色死活不变。原因通常是：
- 子元素本身有
style="color: #000"这类内联样式，它比普通 class 权重高 - 浏览器默认给
h1~h3设了color，而你的 hover 规则没显式覆盖它 - 用了
currentColor但父级没设 color，导致继承链断掉
解决办法：hover 规则里必须显式写 color: red，别指望靠继承自动生效；如果子元素带 svg 图标，记得单独加 .card:hover > .title svg { fill: red; } 或统一用 fill: currentColor。
移动端 hover 会失效，但不是 bug
iOS Safari 和部分安卓浏览器默认不触发 :hover，这是为触摸设备做的主动优化，不是兼容性缺陷。
- 不要用
:hover控制关键功能（比如“悬停才显示删除按钮”） - 若后台系统明确只跑 PC 端，可忽略；否则建议加媒体查询隔离：
@media (hover: hover) { .card:hover > .delete-btn { opacity: 1; } } - 第一次点击后临时启用 hover 是正常行为，别当成 bug 去 hack
transition 卡顿？先看动的是什么属性
加了 transition: color 0.2s 还卡，通常不是性能问题，而是你同时动了布局属性：
-
color、opacity、transform属于“合成层友好”属性，GPU 加速，一般不卡 - 如果 hover 规则里还改了
padding、border、font-size，就会触发重排（reflow），明显掉帧 - 文字阴影
text-shadow在 hover 时一起变，绘制压力翻倍，慎用
真正要平滑，就只动 color 或 opacity，其他视觉变化交给 transform 配合 will-change。
最容易被忽略的点：DOM 结构是否真如你写的那样——比如用 React Portal 把子元素挪到 body 下，那它就不再是父元素的后代，:hover 自然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
