CSS滑动边框 [英] CSS sliding border

问题描述

感谢codeSpy，我有这样的： http://jsfiddle.net/p9tBR/

我无法弄清楚如何在更改页面时更改蓝线。例如，如果我在第2页上，我希望蓝线在2而不是1下。当我在第2-4页时，该行回到1.对不起，我很害怕这是一张图片。

>

HTML：

 < header> 
< ul> 
< li>< a href =1.htmlid =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; 
位置：绝对; 
剩下：50％; 
 width：500px; 
 margin：0 0 0 -250px; 
 list-style-type：none; 
} 
 
 ul：hover>跨度{
背景：＃d0332b; 
} 
 
 ul {margin-top：50px;} 
 
 ul li {
 font-weight：bold; 
宽度：25％; 
 float：left; 
 padding：7px 0; 
 text-align：center; 
光标：指针; 
} 
 
 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; 
底部：-42px; 
 display：block; 
宽度：25％; 
 height：7px; 
背景：＃00b6ff; 
} 
 
 ul li，span {
 -webkit-transition：所有0.2s易用性; 
 -moz-transition：所有0.2s缓解; 
 -o-transition：全部0.2s缓解; 
过渡：全部0.2s缓解; 
职位：亲属; 
} 
 
 a {
 text-decoration：none; 
颜色：＃232323; 
} 
 
 a：hover {
 display：block; 
颜色：＃d0332b; 
} 
  

解决方案

如果您为第一个链接添加悬停状态：

  ul li：nth-​​child（1）：hover〜span {
 left：0％; 
} 
  

并为当前标签添加一个活动类，很好。 非活动类名是必需的，因此 .active 样式不会覆盖：hover 样式。

 < header> 
< ul> 
< li class =inactive>< a href =1.htmlid =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 {
剩下：0％; 
} 
 
 ul li.active:nth-child（2）〜span，
 ul li.inactive：nth-​​child（2）：hover〜span {
剩25％; 
} 
 
 ul li.active:nth-child（3）〜span，
 ul li.inactive：nth-​​child（3）：hover〜span {
剩50％; 
} 
 
 ul li.active:nth-child（4）〜span，
 ul li.inactive：nth-​​child（4）：hover〜span {
剩75％; 
} 
  

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

Thanks to codeSpy, I have this: http://jsfiddle.net/p9tBR/

What I can't figure out is how to change the blue line as I change pages. For example, if I'm on page 2, I want the blue line to be under the 2 instead of the 1. When I'm on page 2-4, the line goes back to the 1. Sorry I'm awful at explaining this so here's a picture.

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

解决方案

Interesting CSS, not seen that done before.

If you add a hover state for the first link too:

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

and add an "active" class for the current tab, then it works quite nicely. The "inactive" class names are required so that the .active style doesn't override the :hover styles.

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

这篇关于CSS滑动边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！