jquery - CSS 或 jQuery 滑动边框底部

Question

这是我所拥有的：http: //jsfiddle.net/axe3J/

当我将鼠标悬停在 2-5 上时，我正在尝试使边框底部滑动并从蓝色变为红色。我从未使用过 jQuery，所以我希望仅使用 CSS 就可以。提前致谢。

HTML：

<ul>
        <li><a href="1.html" class="button" id="current">1</a></li>
        <li><a href="2.html" class="button">2</a></li>
        <li><a href="3.html" class="button">3</a></li>
        <li><a href="4.html" class="button">4</a></li>
        <li><a href="5.html" class="button">5</a></li> 
</ul>

CSS：

li {
display: inline;
}

.button {
padding: 5px 35px 5px 35px;
background-color: transparent;
text-decoration: none;
}

.button:hover {
color: #d0332b;
border-bottom: 7px solid #d0332b;
}

#current {
border-bottom: 7px solid #09C;
color: #09C;
}

Answer 1

您可以使用 css3 过渡来做到这一点。将 span 标签添加到您的 a 标签中。

<li><a href="1.html" class="button" id="current">1 <span class="border"></a></span></li>
<li><a href="2.html" class="button">2 <span class="border"></a></span></li>

css

li {
    display:inline-block;
    width:150px;
    overflow:hidden;
    position:relative;
    height:20px;
}
li span.border{
    height:5px;
    width:150px;
    left:-150px;
    background:green;
    position:absolute;
     -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    bottom:0;
}
li a#current span.border{
    left:0;
    background:red;
}
li:hover span.border{
    left:0;
} 

我想你明白了。请根据您的需要更改CSS。谢谢。