如何为Bootstrap 4卡片添加悬停动画并解决阴影失效问题

我来帮你搞定这个卡片悬停效果的问题！先说说你原代码里的核心问题：你写的.card :hover（注意空格）是后代选择器，它只会在你悬停卡片内部的子元素（比如文本、图标）时触发样式，而不是悬停卡片本身，这就是阴影失效的原因。

下面是修正后的完整方案，包含缩放效果、边框变色、文本同步放大和蓝色阴影：

整理后的HTML结构 #

先把你的HTML格式调整得更清晰，不影响功能但方便维护：

<div class="container">
  <a class="text-decoration-none" href="#">
    <div class="card">
      <img class="icon" src="你的图标地址" alt="功能图标"/>
      <div class="card-text">AlphaBetaGamma</div>
      <div class="d-flex align-items-center justify-content-end">
        <span class="read-more">READ MORE</span>
        <i class="fas fa-arrow-circle-right ml-2"></i>
      </div>
    </div>
  </a>
</div>

完整CSS代码 #

/* 给卡片添加基础过渡，让所有动画平滑自然 */
.card {
  transition: all 0.3s ease;
  border: 1px solid #dee2e6; /* 继承Bootstrap默认边框色 */
  overflow: hidden; /* 避免缩放时内容溢出卡片 */
}

/* 卡片悬停时的核心效果 */
.card:hover {
  transform: scale(1.03); /* 轻微缩放，数值可根据需求调整 */
  box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3); /* Bootstrap蓝色系柔和阴影 */
  border-color: #007bff; /* 边框变为Bootstrap原生primary蓝色 */
}

/* 悬停时文本同步放大，和卡片动画保持一致 */
.card:hover .card-text {
  font-size: 1.1rem; /* 在原字体基础上放大，可按需修改 */
  transition: font-size 0.3s ease;
}

/* 优化"READ MORE"的悬停效果，和整体动画同步 */
.card:hover .read-more {
  font-size: 14px;
  transition: font-size 0.3s ease;
}

/* 可选：让箭头也增加小动画，提升交互感 */
.card:hover .fas.fa-arrow-circle-right {
  transform: translateX(3px);
  transition: transform 0.3s ease;
}

关键说明 #

1. 修复选择器：把.card :hover改成.card:hover（去掉空格），这样才能正确选中卡片本身的悬停状态，而不是内部子元素。
2. 平滑过渡：给.card添加transition: all 0.3s ease;，让缩放、阴影、边框变化都有自然的动画过渡，不会显得突兀。
3. 缩放与文本同步：通过.card:hover .card-text控制文本的放大，确保和卡片缩放节奏一致。
4. 蓝色阴影优化：使用rgba(0, 123, 255, 0.3)这个Bootstrap原生的primary蓝色值，既贴合框架风格，又通过透明度让阴影更柔和不刺眼。

如果需要调整缩放幅度，修改transform: scale(...)里的数值即可（1是原大小，1.03代表放大3%）。

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