CSS3转换不会触发悬停

Question

我有一个相当基本的索引页面，包含各种不同的链接到报表。这些链接是一个带有内部图像的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应用程序，但该页面只是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; 
} 

Answer 2

您还没有指定您所期望的准确输出，但由于东西在过渡输入/输出背景应该工作你的情况一样简单。

example

transition: width 2s, height 2s; 

这里这个规则是没有意义的，过渡准备制作动画的属性顺利，如果你想动画width或height，你应该从0做过渡宽/高一些元素价值，但没有在您的代码中指定