CSS3的悬停切换效果

Question

当鼠标悬停在导航按钮上时，我已经制作了一个悬停效果，但是当鼠标离开时，它只是弹出到适当的位置。我想知道如何才能达到鼠标悬停的效果。

我尝试添加过渡代码到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;
}

谢谢大家!

Answer 1

不如这样做:

 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例子

简单明了。:)