html - 如何添加过渡时间以强调悬停效果

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

最初尝试将 border-bottom 设置为透明:

#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/