css :当前元素和上一个元素上的悬停效果
提问于 2014-01-17 21:51:10
我有许多无序的列表，每个列表都有5个li。
<ul class="Rank">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>我想要更改当前li:hover元素和该列表中所有以前的li元素的background-color。假设，如果我将鼠标悬停在第3个li上，则第3个、第2个和第1个li应该具有background-color:#00f;
我可以用jQuery或JavaScript做，但我想用纯CSS。目前正在关注本文：http://css-tricks.com/useful-nth-child-recipies/
我可以用这个.Rank li:hover更改当前悬停的li元素的背景，但不能理解如何更改当前.Rank列表中以前元素的background-color。
从上面的文章中，我也学会了改变背景，直到nth-chid，但不知道如何在上面应用:hover。
.Rank li:nth-child(-n+5)
{
background-color:#00f;
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-17 22:08:43
http://jsfiddle.net/coma/PLBYG/2/
或
http://jsfiddle.net/coma/PLBYG/3/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
}
ul.rank > li {
position: relative;
margin: 0;
height: 30px;
background: #ccc;
transition: background-color 350ms;
}
ul.rank:hover > li {
background-color: #00f;
}
ul.rank > li + li {
margin-top: 10px;
}
ul.rank > li:hover ~ li {
background: #ccc;
}
ul.rank > li + li:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}或者！
http://jsfiddle.net/coma/PLBYG/4/
ul.rank {
margin: 0;
padding: 0;
list-style: none;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}Stack Overflow用户
发布于 2014-07-22 13:23:58
张贴我的答案以供参考(给后来像我一样来看这篇文章的人)。
这里有一个不使用:before或:after的解决方案。
它对所有的li都使用float: right，而且您还必须将li放在您希望它们出现的相反顺序中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21196588
复制
腾讯云开发者
