Trasition border-bottom？

Question

我试图在border-bottom淡出，我似乎无法让它工作。 这是我尝试过的：

#navBar a:hover {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        border-bottom: 1px solid #fff;
        }

它只是一直没有过渡。 我究竟做错了什么？

Answer 1

问题是你试图通过添加边框来进行过渡，这不起作用。 但是，您可以使用从transparent到#FFF的边框过渡颜色：

HTML ：

<div id="navBar">
    <a>Link</a>
</div>

CSS ：

#navBar a {
    border-bottom: 1px solid transparent;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
#navBar a:hover {
    border-bottom: 1px solid #FFF;
}

小提琴 ： 小提琴

Answer 2

如果您想从无边框转到白色，您仍应编写默认属性，因为转换不会为您执行此操作。

http://jsfiddle.net/ZmUAw/3/

#navBar a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

之后，您可以通过转换将其更改为白色

#navBar a:hover {
    border-bottom: 1px solid #000;
}