javascript - CSS :hover effect on current and previous elements

Question

我有很多无序列表，每个 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;
}

Answer 1

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