CSS 过渡未按预期工作答案

【问题标题】：CSS transition not working as intendedCSS 过渡未按预期工作
【发布时间】：2014-03-30 07:17:45
【问题描述】：

当我悬停链接时，会发生过渡。但是，如果我将链接关闭悬停状态，则过渡会立即消失。如何在不更改 html 的情况下最好地解决这个问题？

感谢您的帮助。

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

【问题讨论】：

标签： html css hover transitions

【解决方案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 */
}

【讨论】：

【解决方案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; 
}

【讨论】：

【解决方案3】：

过渡属性告诉应用过渡的属性及其持续时间。如果您在 :hover 状态中添加它，则转换将仅在悬停状态下启用。您希望始终保持过渡，但在悬停时更改背景。

【讨论】：

【解决方案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; 
}

当一个元素应用了转换时，对其属性的任何更改都将反映为动画。您可以通过状态更改来触发它们，例如 :hover、:active 等

Check it out here

【讨论】：