CSS gleitende Grenze

Question

Dank codeSpy, ich habe dies: http://jsfiddle.net/p9tBR/

Was kann ich nicht herausfinden, wie die blaue Linie zu ändern, wie ich Seiten ändern. Zum Beispiel, wenn ich auf Seite 2 bin, möchte ich, dass die blaue Linie unter der 2 statt der 1 ist. Wenn ich auf Seite 2-4 bin, geht die Linie zurück zur 1. Sorry, ich bin schrecklich Erklären Sie dies, hier ist ein Bild.

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; 
} 

Answer 1

Interessante CSS, das vorher nicht getan gesehen.

Wenn Sie einen Hover-Zustand für den ersten Link hinzufügen zu:

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

und füge eine „aktive“ Klasse für die aktuellen Registerkarte, dann funktioniert es ganz gut. Die Klassennamen "inaktiv" sind erforderlich, damit der Stil .active die Stile :hover nicht überschreibt.

<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/