:hover 与 + 选择器失效的直接原因是目标元素必须紧邻触发元素且同级，中间不能有文本节点或其它元素；若结构不满足或跨父容器，则需 js 配合 css 实现。
用 :hover 选中相邻兄弟元素时，为什么 + 选择器不生效？
直接原因：目标元素必须紧跟在触发 :hover 的元素之后，且是**同级、紧邻、兄弟关系**。比如 div:hover + p 只能影响紧挨在它后面的那一个 p，中间插个注释、空格文本节点甚至 span 都会断开“相邻”关系。
常见错误现象：div:hover + .preview 写对了，但预览内容始终不显示——大概率是 HTML 结构里两个元素之间有换行或空格生成的文本节点，或者用了 ~（通用兄弟）却误以为是 +（相邻兄弟）。
- 确保触发元素和预览元素在 DOM 树中是连续的兄弟节点，中间无其他元素或有意义的文本
- 如果结构无法调整（如预览块在触发块后面隔了一层
div），+和~都无效，得换思路 -
~能匹配后续所有符合条件的兄弟元素，但无法跨父容器，也不支持反向（即不能让后边的元素 hover 影响前边的）
当预览内容不在同一父级下，还能用纯 CSS 实现 hover 预览吗？
不能。CSS 选择器没有“向上找父级”或“跨父级定位”的能力，:hover 的作用域严格限定在当前元素及其后代、相邻/后续兄弟。如果预览块被包在另一个 section 里，或和触发按钮完全不在一个父容器中，纯 CSS 无解。
此时必须引入 JS，但可以最小化干预：只用 JS 控制一个 class 切换，样式逻辑仍由 CSS 承担。
- 给触发元素加
data-preview-id="detail-1"，预览块设id="detail-1" - JS 监听
mouseenter/mouseleave，动态给body或公共父容器加preview-active类，并记录当前 ID - CSS 写成
.preview-active [data-preview-target="detail-1"] { opacity: 1; }，保持样式集中 - 避免直接操作
style.display，优先用opacity+pointer-events组合，更利于过渡动画和可访问性
:hover 配合 ::before/::after 做气泡预览的限制
这个技巧很常用，但容易忽略两个硬约束：伪元素只能依附于**已渲染的元素**，且内容必须通过 content 属性注入，无法直接塞进 HTML 结构里的复杂内容（比如带链接、图片、多段文字的预览卡片）。
典型翻车场景：想用 button:hover::after 显示一个含 img 标签的提示框——不行，content 只接受字符串、attr()、url() 或计数器，不解析 HTML。
- 简单文本提示可用
attr(data-tip)+::after，轻量且无需 JS - 需要富内容？伪元素方案立刻失效，必须用真实 DOM 元素配合
+或 JS - 注意
z-index：伪元素默认层级受父元素限制，若父元素overflow: hidden，气泡会被裁掉 - 移动端慎用：很多触摸设备不触发
:hover，需额外补:focus和touchstart逻辑
性能与可访问性上容易被忽略的细节
看似简单的 hover 预览，放大到列表页或仪表盘，可能引发重排重绘风暴或键盘导航断裂。
- 避免在
:hover中修改height、width、margin等触发布局的属性，改用transform: scale()+opacity更安全 - 预览元素必须有
tabindex="-1"并在显示时获得焦点，否则键盘用户按 Tab 键会跳过它；隐藏时记得removeAttribute('tabindex')或设为-1 - 用
prefers-reduced-motion媒体查询关掉动画：不加这句，部分用户会因动画眩晕 - 如果预览内容含重要信息（如价格、状态说明），别只靠 hover 显示——屏幕阅读器通常不读取
:hover状态下的内容，得用aria-describedby同步关联
hover 预览不是“写完就跑”，关键在结构是否可控、内容是否可访问、动效是否可降级。真要稳，先画好 DOM 关系图，再决定用 +、~ 还是 JS 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
