CSS滑动边框

感谢codeSpy，我有这个： http ： //jsfiddle.net/p9tBR/

我无法弄清楚的是当我改变页面时如何改变蓝线。 例如，如果我在第2页，我希望蓝线低于2而不是1.当我在第2-4页时，线路会回到1.对不起，我很害怕解释这个，所以这是一张图片。

HTML：

 
 
 
2
 
3
 
4
  
  

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，以前没见过。

如果您也为第一个链接添加hover状态：

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

并为当前选项卡添加“活动”类，然后它可以很好地工作。 “非活动”类名称是必需的，因此.active样式不会覆盖:hover样式。

 
 
 
 
2
 
3
 
4
  
 
 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/