本文讲解如何通过 CSS 的 :hover 伪类与相邻兄弟选择器（+）实现“鼠标悬停主元素时显示隐藏卡片”的交互效果，并指出常见失效原因及完整可运行解决方案。
本文讲解如何通过 css 的 `:hover` 伪类与相邻兄弟选择器（`+`）实现“鼠标悬停主元素时显示隐藏卡片”的交互效果，并指出常见失效原因及完整可运行解决方案。
在实际开发中，许多开发者尝试用 .single-album:hover + .hide 实现悬停显示卡片，却未能生效——根本原因在于：.hide 元素并非 .single-album 的直接相邻兄弟元素**。从 HTML 结构可见，.single-album 位于第一个 .row 内部，而 .hide 是另一个独立的 .row，二者被父容器（如 .col-12、.row）层级隔开，不满足 CSS 相邻兄弟选择器（+）的“同级且紧邻”要求。
✅ 正确实现方式需满足两个前提：
- DOM 结构上，触发元素与目标元素必须是同级且紧邻的兄弟节点；
- 目标元素初始隐藏（如 display: none 或 opacity: 0），并通过 :hover 触发显式状态变更。
以下为推荐的结构优化方案（兼容 Bootstrap 5，语义清晰、无 JS 依赖）：
<!-- 同级结构：.single-album 与 .card-wrapper 紧邻 -->
<div class="row">
<div class="col-12">
<div class="single-album">
<img src="img/book-imgs/DH.jpg" alt="Dark House">
<div class="album-info">
<a href="#"><h5>HORROR</h5></a>
<p>Dark House</p>
</div>
</div>
<!-- ✅ 关键：与 .single-album 同级、紧邻 -->
<div class="card-wrapper">
<div class="card mb-3" style="max-width: 540px; height: 240px;">
<div class="row g-0">
<div class="col-md-4">
<img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="NHRT">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">NHRT</h5>
<p class="card-text">This is a wider card with supporting text below as a lead-in to additional content.</p>
<button class="ba-btn">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>对应 CSS（使用 opacity + visibility 实现平滑过渡，优于 display: none）：
立即学习“前端免费学习笔记（深入）”；
.card-wrapper {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.single-album:hover + .card-wrapper {
opacity: 1;
visibility: visible;
}
/* 可选：增强悬停反馈 */
.single-album {
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
}
.single-album:hover {
transform: translateY(-2px);
}⚠️ 注意事项：
- ❌ 避免使用 display: none 配合 transition —— display 属性不可动画，会导致过渡失效；
- ✅ 推荐组合 opacity + visibility：visibility: hidden 保持文档流占位，opacity: 0 实现视觉隐藏，两者均可过渡；
- 若需完全脱离文档流（如绝对定位卡片），可改用 position: absolute 并配合 z-index，但需确保父容器设 position: relative；
- 移动端需额外添加 @media (hover: hover) and (pointer: fine) 媒体查询，避免触屏设备误触发。
该方案零 JavaScript、纯 CSS 实现，性能优异，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100），是构建响应式悬停卡片的可靠实践。
