html - 在 css3 中使用过渡 mouseout

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