Question

当我悬停链接时，会发生转换。但是，如果我将链接置于悬停状态，则转换会立即消失。如何在不更改html的情况下解决此问题？

感谢您的帮助。

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

那是因为你的过渡被应用于伪选择器，而不是你想要动画的元素。

这应该可以解决问题：

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 etc

Check it out here

Answer 3

这应该有效。 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 4

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

CSS转换不按预期工作

4 个答案: