如何实现鼠标悬停时显示卡片效果（CSS邻接选择器与显示控制详解）-html教程-PHP中文网

如何实现鼠标悬停时显示卡片效果（CSS邻接选择器与显示控制详解）

本文详解如何通过CSS实现“鼠标悬停在缩略图上时显示对应详情卡片”的交互效果，重点解决+相邻兄弟选择器失效问题，提供结构优化、选择器修正及过渡动画增强的完整方案。

本文详解如何通过css实现“鼠标悬停在缩略图上时显示对应详情卡片”的交互效果，重点解决`+`相邻兄弟选择器失效问题，提供结构优化、选择器修正及过渡动画增强的完整方案。

在实际开发中，许多开发者尝试用 .single-album:hover + .hide 实现悬停显示卡片，却失败了——根本原因在于：.hide 并非 .single-album 的相邻兄弟元素（adjacent sibling），而是位于不同 .row 容器中，DOM层级不满足 + 选择器的严格条件（必须是同一父级下的紧邻后继元素）。

✅ 正确解法：将卡片嵌套在对应缩略图容器内部，并使用后代选择器或子选择器控制显隐。以下是重构后的推荐结构与样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 推荐HTML结构（语义清晰、层级可控）

<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>

      <!-- 关联的详情卡片（初始隐藏） -->
      <div class="album-card d-none d-md-block">
        <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. This content is a little bit longer.</p>
                <button class="ba-btn">Download</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

✅ 对应CSS（支持平滑过渡与响应式隐藏）

/* 初始隐藏详情卡片 */
.single-album .album-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* 悬停时显示卡片 */
.single-album:hover .album-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 可选：为卡片添加轻微上浮动效增强反馈 */
.single-album:hover .album-card .card {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}