css:悬停对当前和以前元素的影响

Question

我有很多无序的5 li列表

 <ul class="Rank">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 </ul>

我想更改background-color当前li:hover元素和li该列表中的所有先前元素.假设,如果我徘徊在第li3,那么第3,第2和第1李应该有background-color:#00f;

我可以用jQuery或JavaScript来做,但我希望它在纯CSS中.目前正在关注这篇文章:http://css-tricks.com/useful-nth-child-recipies/

我可以li用此更改当前悬停元素的背景.Rank li:hover但无法理解如何更改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);
}