求助：鼠标悬停显示卡片失效，CSS +选择器未起作用

你的悬停效果失效的核心原因是CSS相邻兄弟选择器+的匹配规则限制：它只能匹配紧跟在目标元素之后的直接同级元素，而你的.single-album和.hide元素分属不同的父级容器（.single-album在.col-12内，.hide是独立的.row），两者并非直接同级，所以选择器无法命中目标元素。

方案1：调整HTML结构（推荐，纯CSS实现） #

将需要显示的卡片移到.single-album的同一父级下，作为其紧邻的同级元素，这样+选择器就能正常工作：

修改后的HTML #

<div class="row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
    <!-- 把卡片移到此处，成为single-album的紧邻同级 -->
    <div class="row hide">
      <div class="col-lg-12">
        <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="...">
            </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 #

/* 默认隐藏卡片 */
.hide {
  display: none;
}

/* 悬停single-album时，显示紧邻的hide元素 */
.single-album:hover + .hide {
  display: block;
}

方案2：不修改HTML结构，改用通用兄弟选择器 #

如果不想调整HTML结构，可以用通用兄弟选择器~，它能匹配目标元素之后的所有同级元素（无需紧邻）。你的两个.row是同级元素，所以可以给包含.single-album的.row加个标识类，比如album-row：

修改后的HTML（仅给第一个row加类） #

<div class="row album-row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
  </div>
</div>

<div class="row hide">
  <div class="col-lg-12">
    <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="...">
        </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>

对应的CSS #

.hide {
  display: none;
}

/* 悬停album-row时，显示后续的hide同级元素 */
.album-row:hover ~ .hide {
  display: block;
}

内容的提问来源于stack exchange，提问作者Mujtaba Ahmed