如何添加轉場時間以增加下劃線懸停效果

Question

好吧，我所要求的真的很蹩腳（我知道很多css） 但這裏是我的問題 - 我有一些文字，我想在懸停時加下劃線，但底線上徘徊不出現延遲 請幫助 這裏是我的代碼 -

#full{ 
top: 0px; 
left: 0px; 
width: 100%; 
height: auto; 
-webkit-transition: all 0.5s ease; 
} 

    #full > #header{ 
     top: 0px; 
     width: 100%; 
     height: 50px; 
     background: #e25959; 
     position: fixed; 
     -webkit-transition: all 0.5s ease; 
    } 
    #full > #header > .link{ 
     position: relative; 
     float: right; 
     color: #fff; 
     margin: 15px; 
     -webkit-transition: all 0.5s ease; 
    } 
    #full > #header > .link:hover{ 
     border-bottom: 1px solid #fff; 
     cursor: default; 
    } 

和我的HTML -

<div id="full"> 
    <div id="header"> 
     <div class="link">MY WORK</div> 
     <div class="link">ABOUT ME</div> 
     <div class="link">HOME</div> 
    </div> 
</div> 

Answer 1

嘗試最初設置邊框底部的透明傳輸NT：

#full > #header > .link{ 
    position: relative; 
    float: right; 
    color: #fff; 
    margin: 15px; 
    -webkit-transition: all 0.5s ease; 
    border-bottom: 1px solid transparent; /* <------ */ 
} 

下面是一個例子，http://jsfiddle.net/wf3fc/3/

Answer 2

這樣做：

#full > #header > .link { 
    position: relative; 
    float: right; 
    color: #fff; 
    margin: 15px; 
    border-bottom: 1px solid rgba(0,0,0,0); 
    -webkit-transition: all 0.5s ease 0s; 
} 
#full > #header > .link:hover { 
    border-bottom-color: #fff; 
    cursor: default; 
}