CSS轉換無法按預期工作

Question

當我懸停鏈接時，發生轉換。但是，如果我將鏈接置於懸停狀態，則轉換將立即消失。我怎樣才能解決這個問題，而不改變HTML？

謝謝你的幫助。

http://codepen.io/anon/pen/mKLIp

Answer 1

把過渡的CSS菜單中的正常狀態。

也就是說，你的CSS更改爲：

nav a:link, a:visited { 
color: #FFF; 
display: inline-block; 
padding: 1em; 
height: 1.5em; 
text-decoration: none; 
-o-transition: .5s ease-in-out; 
-ms-transition: .5s ease-in-out; 
-moz-transition:.5s ease-in-out; 
-webkit-transition:.5s ease-in-out; 
transition: .5s ease-in-out; 
} 

nav a:hover, nav a:active, nav .active a:hover, nav .active a:active { 
text-shadow: none; 
background-color: #CF5C3F; /* fix out transition issue */ 
} 

Answer 2

這應該工作。 http://codepen.io/anon/pen/mKLIp

nav a:link, a:visited { 
color: #FFF; 
display: inline-block; 
padding: 1em; 
height: 1.5em; 
text-decoration: none; 
-o-transition: .5s ease-in-out; 
-ms-transition: .5s ease-in-out; 
-moz-transition:.5s ease-in-out; 
-webkit-transition:.5s ease-in-out; 
transition: .5s ease-in-out; 

} 

nav a:hover, nav a:active, nav .active a:hover, 
nav .active a:active { 
text-shadow: none; 
background-color: #CF5C3F; 
} 

Answer 3

transition屬性指示應用轉換的屬性及其持續時間。如果將其添加到：懸停狀態，則僅在懸停狀態下啓用轉換。您希望始終保持轉場，但在懸停時更改背景。

Answer 4

這是因爲您的轉場正在應用於僞選擇器，而不是您嘗試進行動畫處理的元素。

這應該做的伎倆：

nav a { 
    -o-transition: .5s ease-in-out; 
    -ms-transition: .5s ease-in-out; 
    -moz-transition:.5s ease-in-out; 
    -webkit-transition:.5s ease-in-out; 
    transition: .5s ease-in-out; 
} 

當一個元件已申請過渡，其屬性的變化將反映爲動畫。您觸發這些與狀態變化如：懸停：活躍等

Check it out here