Question

我有很多无序的5 li列表，如

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

我想更改当前background-color元素的li:hover以及该列表中所有以前的li元素。假设，如果我将鼠标悬停在第3 li上，那么第3，第2和第1个li应该有background-color:#00f;

我可以在jQuery或JavaScript中完成它，但我想在纯CSS中使用它。目前正在关注此文章：http://css-tricks.com/useful-nth-child-recipies/

我可以使用此li更改当前悬停的.Rank li:hover元素的背景，但无法理解如何更改当前background-color列表中先前元素的.Rank。< / p>

从上面的文章中我还学会了将背景更改为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);
}

Answer 2

您还可以使用JQuery：JImlD.

Answer 3

发布我的答案以供参考（对于那些稍后来看我的人）这是一个不使用:before或:after的解决方案。

http://jsfiddle.net/nLCZK/

它对所有float: right使用li，您还必须按照您希望它们出现的相反顺序放置li。

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

3 个答案: