css：悬停对当前和以前元素的效果 [英] css :hover effect on current and previous elements

问题描述

我有很多无序的5 li列表。

I have many unordered lists of 5 li in each like

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

我要更改 background-color 当前 li：hover 元素和该列表中所有以前的 li 元素。假设，如果我在第三个 li 上悬停，那么第三，第二和第一个li应该有 background-color：＃00f;

I want to change background-color of current li:hover element and all previous li elements in that list. Suppose, if I hover over 3rd li then 3rd, 2nd and 1st li should have background-color:#00f;

我可以在jQuery或JavaScript，但我想在纯CSS。目前遵循本文： http://css-tricks.com/useful-nth-child-recipies/

I can do it in jQuery or JavaScript, but I want it in pure CSS. Currently following this article: http://css-tricks.com/useful-nth-child-recipies/

我可以使用此 .Rank li更改当前悬停的 li 元素的背景：hover 但不能理解如何更改当前 .Rank background-color c $ c> list。

I can change background of currently hovered li element with this .Rank li:hover but cannot understand how can I change background-color of the previous elements of that current .Rank list.

从上面的文章我也学会了改变背景，直到 nth-chid 如何应用：hover 。

From above article I also learnt to change background until nth-chid but cannot figure out how to apply :hover on it.

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

这篇关于css：悬停对当前和以前元素的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！