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做過渡寬/高一些元素價值，但沒有在您的代碼中指定