CSS滑動邊界

Question

感謝codeSpy，我有這樣的：http://jsfiddle.net/p9tBR/

我無法弄清楚是如何改變藍線爲我改變頁面。例如，如果我在第2頁上，我希望藍線在2而不是1下。當我在第2-4頁時，該行回到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; 
} 

Answer 1

有趣的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/