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

过渡边界底部？

2 个答案: