5

codeSpy のおかげで、私はこれを持っています: http://jsfiddle.net/p9tBR/

私が理解できないのは、ページを変更するときに青い線を変更する方法です。たとえば、2 ページ目にいる場合、青い線を 1 ではなく 2 の下に配置します。2-4 ページにいるとき、線は 1 に戻ります。これを説明するので、ここに写真があります。

1

HTML:

<header>
    <ul>
    <li><a href="1.html" id="current">1</a></li>
    <li><a href="2.html">2</a></li>
    <li><a href="3.html">3</a></li>
    <li><a href="4.html">4</a></li>
    <span></span>
</ul>
</header>

CSS:

body {
font-family: sans-serif;
}

ul {
padding: 0;
position: absolute;
left: 50%;
width: 500px;
margin: 0 0 0 -250px;
list-style-type: none;
}

ul:hover > span {
background: #d0332b;
}

ul { margin-top: 50px;}

ul li {
font-weight: bold;
width: 25%;
float: left;
padding: 7px 0;
text-align: center;
cursor: pointer;
}

ul li:hover {
color: #d0332b;
}

ul li:nth-child(2):hover ~ span {
left: 25%;
}

ul li:nth-child(3):hover ~ span {
left: 50%;
}

ul li:nth-child(4):hover ~ span {
left: 75%;
}

span {
position: absolute;
bottom: -42px;
display: block;
width: 25%;
height: 7px;
background: #00b6ff;
}

ul li, span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
}

a {
text-decoration: none;
color: #232323;
}

a:hover {
display: block;
color: #d0332b;
}
4

1 に答える 1

6

興味深い CSS、これまでに行われたことはありません。

最初のリンクにもホバー状態を追加すると:

ul li:nth-child(1):hover ~ span {
    left: 0%;
}

現在のタブに「アクティブな」クラスを追加すると、非常にうまく機能します。.activeスタイルがスタイルをオーバーライドしないように、「非アクティブ」なクラス名が必要:hoverです。

<header>
    <ul>
        <li class="inactive"><a href="1.html" id="current">1</a></li>
        <li class="active"><a href="2.html">2</a></li>
        <li class="inactive"><a href="3.html">3</a></li>
        <li class="inactive"><a href="4.html">4</a></li>
        <span></span>
    </ul>
</header>


ul li.active:nth-child(1) ~ span,
ul li.inactive:nth-child(1):hover ~ span {
    left: 0%;
}

ul li.active:nth-child(2) ~ span,
ul li.inactive:nth-child(2):hover ~ span {
    left: 25%;
}

ul li.active:nth-child(3) ~ span,
ul li.inactive:nth-child(3):hover ~ span {
    left: 50%;
}

ul li.active:nth-child(4) ~ span,
ul li.inactive:nth-child(4):hover ~ span {
    left: 75%;
}

http://jsfiddle.net/p9tBR/4/

于 2013-11-09T23:56:12.800 に答える