離開懸停的CSS僞類

Question

我的網站上有一個漂亮的小懸停效果，當用戶懸停在鏈接上時，它可以快速轉換。但是當用戶離開盒子時，影子（和其他特徵）立即消失，而不是退出。有沒有一種方法可以讓屬性淡入和淡出，也許使用某種：un-hover type僞類？謝謝！這裏是CSS塊，如果有幫助：

a.squares:hover, a.squares:active { 
    color: black; 
    background-color: #E8E8E8; 
    box-shadow: 0 0 12px black; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
} 

Answer 1

把轉變上a.squares不a.squares:hover

a.squares { 
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; 
} 
a.squares:hover, a.squares:active { 
    color: black; 
    background-color: #E8E8E8; 
    box-shadow: 0 0 12px black; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 

我通過這個確切的事情去了，當我正要離開約轉變:)