Bootstrap卡片hover触发整行联动异常问题求助

问题描述 #

实现鼠标悬停卡片图片时显示完整描述的效果，但悬停单个卡片时，同行其他卡片也触发悬停效果，且高度同步变为与被悬停卡片相同。

相关代码 #

HTML代码 #

<div class="container-md">
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This card has supporting text below as a natural lead-in to
                additional content.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="..." class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This card has even longer content
                than the first to show that equal height action.
              </p>
            </div>
            <div class="card-footer">
              <small class="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
      </div>
    </div>

原CSS代码 #

.card-body, .card-footer {
    display:none;
}

.card:hover {
    transform: scale(1.1);
    transition: 0.2s linear; 
}

.card:hover > .card-body, .card-footer {
    display:block;
}

问题原因 #

1. CSS选择器逻辑错误：原CSS中.card:hover > .card-body, .card-footer的逗号分隔导致.card-footer成为独立选择器，只要任意卡片悬停，所有卡片的card-footer都会被设置为display:block，引发同行卡片高度变化。
2. Bootstrap行等高特性：使用的row和卡片上的h-100类会让Bootstrap强制同行卡片等高，当某张卡片因悬停显示更多内容而高度增加时，其他卡片会被自动拉伸到相同高度，看起来像是同步触发了悬停效果。

解决方案 #

1. 修正CSS选择器 #

确保仅被悬停的卡片的card-body和card-footer显示：

.card-body, .card-footer {
    display:none;
}

.card:hover {
    transform: scale(1.1);
    transition: 0.2s linear; 
}

/* 修正选择器，关联hover状态到两个元素 */
.card:hover > .card-body, .card:hover > .card-footer {
    display:block;
}

2. 取消强制等高（可选） #

如果不需要同行卡片始终保持等高，可移除卡片的h-100类，或者给每个col添加align-self-start类，让卡片高度随内容自适应：

<!-- 修改col的class -->
<div class="col align-self-start">
  <div class="card">
    <!-- 卡片内容 -->
  </div>
</div>

3. 优化悬停视觉效果（可选） #

为避免卡片缩放时挤压其他元素，可添加定位层级：

.card {
    position: relative;
    z-index: 1;
    transition: all 0.2s linear;
}

.card:hover {
    transform: scale(1.1);
    z-index: 2;
}

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