5

これが私が持っているものです: 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;
}
4

1 に答える 1

0

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を変更してください。ありがとう。

于 2013-11-14T15:35:27.513 に答える