感谢 codeSpy,我得到了这个:http://jsfiddle.net/p9tBR/ 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;
}
有趣的 CSS,以前没见过这样做的。
如果您也为第一个链接添加悬停状态:
ul li:nth-child(1):hover ~ span {
left: 0%;
}
并为当前选项卡添加一个“活动”类,然后它就可以很好地工作。需要“非活动”类名,以便.active
样式不会覆盖: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/ http://jsfiddle.net/p9tBR/4/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)