Question

我一直在使用转换来制作简单的菜单“下划线”（实际上是border-bottom）转换，当它悬停时你会得到border-bottom，你会看到他弹出。但是，转换“mouseout”效果存在问题，当我从li > a:hover关闭鼠标时，它会消失而没有任何影响。

CSS3代码：

/*Menu*/
#menu{
    float: right;
    margin: -60px 0px 0;
}

#menu ul{
    list-style-type:none;
}

#menu ul li{
    display: inline;
    padding-right: 20px;
}

#menu ul li a{
    display: inline-block;
    text-decoration: none;
    color: #a1a1a1;
    font-size: 19px;
    padding-bottom: 7px;
}
#menu li > a:hover {
    transition: all 0.5s ease 0s;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
}

问：如何在css3中获得mouseout过渡效果？

http://jsfiddle.net/B6ceP/

Answer 1

将转换置于初始状态，而不仅仅放在:hover上。此外，如果你想动画回到没有边框，你需要一个边框，只需使它透明（或0px宽）：

#menu ul li a{
    display: inline-block;
    text-decoration: none;
    color: #a1a1a1;
    font-size: 19px;
    padding-bottom: 7px;
    border-bottom: 1px solid transparent;
    transition: all 0.5s ease-in-out;
}

JSFiddle

在css3中使用转换mouseout

1 个答案: