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; 
} 

小提琴：Fiddle

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; 
}