最简写法是用:hover配合display或visibility控制隐藏元素显示，需确保目标元素为触发元素的后代或相邻兄弟；后代用.trigger:hover .hidden-content，相邻兄弟用.trigger:hover + .hidden-content，通用兄弟用.trigger:hover ~ .hidden-content。
hover 时让隐藏元素显示的最简写法
直接用 :hover 改变目标元素的 display 或 visibility 即可，但必须确保 dom 结构支持——被控制的元素得是 hover 触发元素的后代或相邻兄弟（css 无法跨父级选择）。
-
display: none→display: block（或其他合适值）最常用，但切换会触发重排 -
visibility: hidden→visibility: visible不影响布局，适合需要保留占位的场景 - 若目标元素在 hover 元素之后且是紧邻兄弟，可用
+（相邻兄弟选择器）或~（通用兄弟选择器）
常见 DOM 结构与对应 CSS 写法
结构决定你能怎么写。下面三种是最典型的：
✅ 后代关系（最稳妥）：
.trigger:hover .hidden-content { display: block; }✅ 相邻兄弟（hover 元素后紧跟要显示的内容）：
立即学习“前端免费学习笔记（深入）”；
.trigger:hover + .hidden-content { display: block; }✅ 通用兄弟（hover 元素后任意位置的同级 .hidden-content）：
.trigger:hover ~ .hidden-content { display: block; }⚠️ 注意：.trigger:hover .hidden-content 要求 .hidden-content 在 .trigger 内部；如果它在外部且非兄弟，纯 CSS 无解，需 js。
为什么 hover 后内容一闪就消失？
典型原因是鼠标移向显示内容时，离开了触发 :hover 的原始元素，导致样式立刻回退。解决方法只有两个：
- 把
.hidden-content放进.trigger容器内，让它成为后代，这样悬停区域自然包含弹出内容 - 如果必须分离布局，在两者之间留出足够宽的“间隙过渡区”，并用
margin或padding连接，但不可靠，不推荐 - 绝对定位的弹层建议加
pointer-events: auto（默认已是），避免因透明/层级问题误判鼠标离开
transition 动画配合 hover 显示时要注意什么
想加淡入、滑动等效果，必须对 opacity、transform 等可动画属性操作，不能对 display 做 transition（它不支持动画）。
正确组合示例：
.hidden-content { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; } .trigger:hover .hidden-content { opacity: 1; transform: translateY(0); }⚠️ 关键点：初始状态必须设为可动画值（如 opacity: 0），而非 display: none；否则 transition 不生效。
复杂交互中，hover 区域、显示内容、过渡方式三者稍有错位，视觉就会断裂。先保证结构可达，再调样式，最后加动画。