Question

我只是想增加引导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>

我应该如何过渡？

Answer 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;
}

Answer 2

您在这里：）

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

Answer 3

在CSS的下面更新。

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

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

3 个答案: