本文讲解如何通过 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">
@@##@@
<div class="album-info">
<a href="#"><h5>HORROR</h5></a>
<p>Dark House</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</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">
@@##@@
</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），是构建响应式悬停卡片的可靠实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
