我为鼠标悬停在导航按钮上时制作了悬停效果,但是当鼠标离开时它会弹回原位。 我想知道如何正确地实现悬停打开和关闭的效果。
我已经尝试将过渡代码添加到 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;
}
简单易行。:)
关于html - 悬停打开和关闭的 CSS3 过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24414340/