这是我拥有的: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;
}
最佳答案
您可以使用 css3 转换来做到这一点。 在你的 a 标签中添加一个 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。谢谢。
关于jquery - CSS 或 jQuery 滑动边框底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19871397/