CSS緩入輸出轉換無法正常工作

Question

我在導航欄上使用CSS緩存懸停進行鼠標懸停。 但是，當鼠標光標懸停時，過渡只會緩解，並且在光標離開超鏈接區域後立即對齊，但不會順利地緩解。

這是我用過的CSS：

nav { 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    background-color: #036;  
} 

nav ul { 
    list-style: none; 
    margin-top: 15px; 
} 

nav ul li a { 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    color: #fff; 
    padding: 10px 0; 
} 

.nav-logo { 
    margin-left: 20px; 
    background-color: #cacaca; 
} 

.nav-logo:hover { 
    transform: scale(1.1); 
    transition: all 1s ease-in-out; 
} 

nav ul li a:hover { 
    background-color: gold; 
    color: black; 
    border-radius: 10px; 
    transform: scale(1.1); 
    transition: .3s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
} 

Answer 1

你需要採取過渡樣式：

transition: .3s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transform: scale(1.1); 
-webkit-transform: scale(1.1); 

而且從nav ul li a:hover刪除它們並將它們添加到實際元素nav ul li a

雖然他們仍然在懸停，你基本上是在沒有徘徊時消除過渡，因此過渡不適用後喲你離開懸停狀態。

Answer 2

您需要在根元素上添加轉場，而不是在懸停狀態。

nav { 
    background-color: yellow; 
    position: relative; 
    overflow: auto; 
    transition: background-color .3s ease-in-out; 
} 
nav:hover { 
    background-color: pink; 
} 

http://codepen.io/mrshannonyoung/pen/BLzpNz