通过 :hover 伪类配合后代选择器，可在鼠标悬停父元素时改变子元素样式。例如 .parent:hover .child 可使子元素在悬停时由隐藏变为显示，常用于下拉菜单、卡片展示和图片叠加层等场景，结合 transition 可实现平滑动画，需注意子元素必须为后代节点，并避免过度嵌套以保持可维护性。
当需要在鼠标悬停于父元素时，改变其内部子元素的样式，可以通过 :hover 伪类配合 后代选择器 实现。这种方式无需 JavaScript，纯 CSS 即可完成动态布局变化。
基本原理：hover + 后代选择器
利用父元素的 :hover 状态，选中其内部的后代元素并修改样式。只要鼠标停留在父元素范围内，样式就会生效。
HTML 结构示例：
<div class="parent"> <p class="child">我是子元素</p> </div>
CSS 样式设置：
立即学习“前端免费学习笔记（深入）”；
.parent .child {
opacity: 0;
transition: opacity 0.3s;
}
.parent:hover .child {
opacity: 1;
}
此时，当鼠标移到 .parent 上，.child 会从隐藏变为显示。
常见应用场景
- 下拉菜单：导航栏悬停时展开子菜单
- 卡片展示：鼠标移上卡片时显示描述文字或按钮
- 图片叠加层：Hover 时浮现遮罩和操作图标
例如实现一个悬停显示按钮的卡片：
.card {
position: relative;
width: 300px;
height: 200px;
background: #f0f0f0;
overflow: hidden;
}
.card-actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: rgba(0,0,0,0.7);
color: white;
display: flex;
align-items: center;
padding-left: 10px;
transform: translateY(100%);
transition: transform 0.3s;
}
.card:hover .card-actions {
transform: translateY(0);
}
注意事项与技巧
- 确保子元素是父元素的 后代节点，否则选择器不生效
- 使用
transition让变化更自然 - 若子元素有间距或延迟消失，可考虑用
opacity配合pointer-events: none控制交互状态 - 避免过度嵌套选择器，保持可维护性
基本上就这些，合理运用 :hover 和后代选择器，能高效实现多数悬停交互效果。
