html - 悬停时不会触发 CSS3 过渡

Question

我有一个相当基本的索引页面，其中包含指向报告的各种不同链接。这些链接是一个 div，其中包含图像、一些文本和圆 Angular 。目前，div 的背景在悬停时会改变颜色。我想添加一个过渡，让它们在悬停时突出一点。高管们喜欢这样的东西。然而，它似乎并不想带

.card {
  float: left;
  width: 32%;
  padding: 5px;
  margin: .5%;
  text-align: right;
  border-radius: 15px 50px;
}

.card:hover {
  -webkit-transition: width 2s, height 4s;
  /* Safari */
  transition: width 2s, height 2s;
  background-color: #b9d6a0;
  color: black;
}

.card>img {
  margin-bottom: 12px;
}

.card-text {
  font-size: 85%;
}

.dashboardlink {
  width: 100%;
  height: auto;
  border-radius: 15px 50px;
}

<div class="container">
  <div class="row">
    <div class="card">
      <a href="/ip" target="_blank">
        <img class="dashboardlink" src="/images/ip.png" alt="Immediate Pays">
      </a>
      <p class="card-text">Immediate Payments</p>
    </div>


    <div class="card">
      <a href="/ipmtd" target="_blank">
        <img class="dashboardlink" src="/images/ipmtd.png" alt="Immediate Pays - MTD">
      </a>
      <p class="card-text">Immediate Payments Month-To-Date</p>
    </div>


    <div class="card">
      <a href="/ivrPayments" target="_blank">
        <img class="dashboardlink" src="/images/ivrPayments.png" alt="IVR Payments">
      </a>
      <p class="card-text">IVR Payments</p>
    </div>


    <div class="card">
      <a href="/outboundHold" target="_blank">
        <img class="dashboardlink" src="/images/outboundHold.png" alt="Outbound Holds">
      </a>
      <p class="card-text">Outbounds Holds</p>
    </div>


    <div class="card">
      <a href="/poolPen" target="_blank">
        <img class="dashboardlink" src="/images/PoolPen.png" alt="Pool Penetration">
      </a>
      <p class="card-text">Pool Penetration</p>
    </div>


    <div class="card">
      <a href="/Tracker" target="_blank">
        <img class="dashboardlink" src="/images/Tracker.png" alt="Tracker">
      </a>
      <p class="card-text">Tracker Dashboard</p>
    </div>


    <div class="card">
      <a href="/userLookup" target="_blank">
        <img class="dashboardlink" src="/images/userLookup.png" alt="User Lookup">
      </a>
      <p class="card-text">SCSI User Lookup</p>
    </div>

    <div class="card">
      <a href="/inventory" target="_blank">
        <img class="dashboardlink" src="/images/inventory.png" alt="Inventory">
      </a>
      <p class="card-text">Inventory</p>
    </div>

  </div>
</div>

总的来说，我对 CSS 动画有点陌生，我正在整理用于构建此页面的 Bootstrap 模板。任何有助于完善或简化我正在尝试做的事情的建议都将不胜感激。

下面是页面上链接现在的样子的截图:

指向 ShinyDashboard Apps 的链接，但此页面只是 HTML。

Answer 1

这可能需要根据您的喜好进行一些小的编辑，但将过渡属性放置在具有原始大小的 .card 类中。然后从 .card:hover 中删除过渡属性并在那里添加新的大小。此链接可能有帮助:https://www.w3schools.com/css/css3_transitions.asp

.card {
  float: left;
  width: 32%;
  padding: 5px;
  margin: .5%;
  text-align: right;
  border-radius: 15px 50px;
  -webkit-transition: width 2s, height 4s;
  /* Safari */
  transition: width 2s, height 2s;
}

.card:hover {
  width: (insert new size as needed)
  background-color: #b9d6a0;
  color: black;
}