我有很多无序列表,每个 5 里的 like
<ul class="Rank">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
我想更改当前 li:hover
元素的 background-color
以及该列表中所有先前的 li
元素。假设,如果我将鼠标悬停在第 3 个 li
上,那么第 3 个、第 2 个和第一个 li 应该有 background-color:#00f;
我可以在 jQuery 或 JavaScript 中完成,但我希望在纯 CSS 中完成。目前关注这篇文章:http://css-tricks.com/useful-nth-child-recipies/
我可以使用此 .Rank li:hover
更改当前悬停的 li
元素的背景,但无法理解如何更改 background-color
当前 .Rank
列表的先前元素。
从上面的文章中,我还学会了更改背景,直到 nth-chid
但不知道如何在其上应用 :hover
。
.Rank li:nth-child(-n+5)
{
background-color:#00f;
}
最佳答案
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);
}
关于javascript - CSS :hover effect on current and previous elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21196588/