html - CSS3过渡效果，用于将鼠标悬停在和关闭

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

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

感谢大家！

最佳答案

改为这样做：

 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

简单容易。:)

关于html - CSS3过渡效果，用于将鼠标悬停在和关闭，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24414340/