:hover + .target 不生效是因为相邻兄弟选择器要求触发元素与目标元素必须是同一父级下的紧邻同级节点且目标在触发元素之后；结构错误（如目标在前或中间插入其他元素）会导致失效，可改用~或:has()等替代方案。
为什么:hover + .target 不生效？检查DOM顺序和同级关系
相邻兄弟选择器 + 要求触发元素和目标元素必须是同一父级下的**紧邻同级节点**，且目标必须在触发元素之后。常见错误是把要显示的 .target 放在前面，或中间插了其他同级元素。
- ✅ 正确结构：
<div class="trigger"></div> <div class="target"></div> - ❌ 错误结构：
<div class="target"></div> <div class="trigger"></div>（+无法向前选） - ❌ 错误结构：
<div class="trigger"></div> <p>干扰元素</p> <div class="target"></div>（中间有其他同级节点，+失效）
如果结构无法调整，改用通用兄弟选择器 ~：它不要求“紧邻”，只要目标在触发元素之后、同级即可，但依然不能跨层级或向前选。
:has() 能解决哪些:hover搞不定的问题？
:has() 是目前唯一能实现「子元素悬停时影响父元素」的纯CSS方案，比如阻止父容器在子按钮悬停时触发自身样式。
- 典型场景：父
<h2 class="parent">...<button>+</button> </h2>，希望.parent:hover在鼠标移到<button></button>上时失效 - 写法：
.parent:hover:not(:has(button:hover)) { color: orange; } - ⚠️ 注意：
:has()不支持伪元素（如::before）、不支持:focus-within嵌套，且 Safari 15.4+、Chrome 105+、Firefox 111+ 才支持，旧浏览器需降级处理
卡片内多个悬停区域如何互不干扰？用父容器隔离作用域
多个卡片共用同类名时，悬停效果容易全局生效。关键不是堆选择器，而是靠结构约束作用域。
- 确保每个卡片是独立容器（如
<article class="card"></article>），所有悬停规则都以.card开头 - 写法示例：
.card:hover img控制图片，.card:hover .card-desc控制描述，不会波及其它.card - 避免写
:hover .card-desc—— 这会匹配页面任意位置悬停时的.card-desc，完全失控 - 如果需要「悬停按钮显示本卡内某元素」，优先用
.card-btn:hover ~ .card-content（~比+更宽松，适合中间可能有空格或注释的HTML）
移动端没有:hover怎么办？别硬套，换交互逻辑
CSS :hover 在触摸设备上行为不可靠（部分安卓浏览器模拟一次，iOS Safari 基本不触发），强行适配反而出错。
- 真实做法：用
:active做轻量反馈（如按钮按压色），或用 JavaScript 监听touchstart/touchend切换类名 - 如果必须保留悬停视觉，可加媒体查询降级：
@media (hover: hover) and (pointer: fine) { .card:hover { ... } } - 切记：不要依赖
:hover实现核心功能（比如隐藏关键操作入口），那会让触摸用户直接丢失功能
复杂点永远在结构——选对了父容器范围，:hover 就不会溢出；没选对，再 fancy 的选择器组合也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
