Question

当我将鼠标悬停在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标记。

<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。感谢。

CSS或jQuery滑动边框底部

1 个答案: