挂起和关闭的CSS3过渡效果

时间:2014-06-25 16:45:42

标签: html css html5 css3 css-transitions

当鼠标悬停在导航按钮上时,我已经做了悬停效果,但是当鼠标离开时它只会弹回原位。 我想知道如何正确地实现悬停的效果。

我尝试将转换代码添加到a和a:hover,但是当我这样做时,每次导航到或刷新页面时都会产生一些奇怪的不需要的过渡效果。

以下是代码:

nav a {
text-decoration: none;
padding: 25px 20px;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
nav a:hover {
background-color: #28292B;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}

谢谢大家!

1 个答案:

答案 0 :(得分:3)

请改为:

 nav a {
text-decoration: none;
padding: 25px 20px;
-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 {
background-color: #28292B;
    color:white;
}

JSFiddle Example

简单易行。:)