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