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/

的示例

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

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

2 个答案: