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

我有一个相当基本的索引页面，其中包含指向报告的各种不同链接。这些链接是一个div，其中包含图像，一些文本和圆角。目前，div的背景在悬停时会更改颜色。我想添加一个Transition，使它们在悬停时弹出。高管喜欢这样的东西。但是，它似乎不想接受

.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动画有点陌生，并且我正在整理用于构建此页面的引导程序模板。任何建议将不胜感激，以帮助改善或简化我正在尝试做的事情。

这是链接现在在页面上的样子的屏幕截图：


转到ShinyDashboard Apps的链接，但此页面只是HTML。

最佳答案

根据您的偏好，这可能需要进行一些较小的编辑，但是将过渡属性以原始大小放置在.card类中。然后从.card：hover中删除transition属性，并在其中添加新的大小。该链接可能有帮助：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;
}

关于html - CSS3过渡不会在悬停时触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45969544/