如何使用 CSS 过渡来增加悬停时的 Bootstrap 卡片字体大小？答案

【问题标题】：How can CSS transition be used to increase Bootstrap card font size on hover?如何使用 CSS 过渡来增加悬停时的 Bootstrap 卡片字体大小？
【发布时间】：2019-06-26 03:12:13
【问题描述】：

我只是想增加引导程序 card 类中文本的大小，并在 hover 操作上更改其颜色，但我的代码仅更改颜色，不会增加字体大小，也不会发生任何转换。我不是专业的前端开发人员，如果您发现我的错误并指出来，请原谅我。这是我正在使用的代码

CSS

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: font 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: white;
}

html

<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            foo bar 
        </h6>
    </div>
</div>

我应该如何进行过渡？

【问题讨论】：

查看代码的工作示例jsfiddle.net/3huv958b/1
您的示例中 ID 为 team 的元素在哪里？

标签： html css bootstrap-4

【解决方案1】：

字体大小由H6标签控制，添加到css即可解决

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: font 1s ease-in-out;
}

#team .card:hover h6 {
  font-size: 1.3rem;
  color: red;
}

【讨论】：

【解决方案2】：

在 CSS 中更新以下部分。

.card:hover .font-weight-normal{
  font-size: 1.3rem;
  color: white;
}

【讨论】：

【解决方案3】：

给你:)

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: red;
}

<div id="team">
<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            foo bar 
        </h6>
    </div>
</div>
</div>

【讨论】：

来个实际的解释而不是“给你 :)”怎么样？
是的，对不起，需要删除你在 css 中提到的#team id name
为什么把id#team拿出来了？如果我只想针对具有 card 类的某些 div 而有多个具有 card 类的 div 会发生什么？
那么你需要在此之前设置一个包含#team的新div（
）
我实际上确实有一个 div 之前有一个 #team id。所以我所针对的具有card 类的div 就在#team div 内。使用您的代码，h6 文本颜色是动画的，但大小保持不变。