CSS: наведите эффект на текущих и предыдущих элементов

У меня есть много маркированных списков 5 Li в каждом какCSS: наведите эффект на текущих и предыдущих элементов

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

Я хочу изменить background-color текущего li:hover элемента и всех предыдущих li элементов в этом списке. Предположим, если я нахожусь над третьим li, то 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; 
}

источник

2014-01-17 Anonymous

Нет предыдущего селектора. Это невозможно сделать только с помощью CSS, используйте javascript –

@ ZachSaucier, который, как я уже говорил в предыдущем коде, выбирает предыдущий сиблинг. Возможно, это не совсем предыдущий селектор, но он может выполнять эту работу, но не может понять, как применить эффект зависания. Мой последний код хорошо работает в предыдущем сходящемся родстве. –

Селектор, который вы предоставляете, не выбирает предыдущие элементы, а только целевые дочерние узлы. с этим ограничением – DaniP

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

источник

2014-01-17 22:08:43 coma

Это больно! :) очень классно –

Мне нравятся эти CSS chanllenges! – coma

WOW! Supperb @coma. Вы похожи на Эйнштейна CSS :). Люблю тебя, человек –

Вы также можете использовать JQuery: JImlD.

источник

2014-01-17 22:29:07

Проводка мой ответ для ссылки (для тех, кто пришел позже, рассматривая это как я сделал).
Данное решение не использует :before или :after.

http://jsfiddle.net/nLCZK/

Он использует float: right для всех li с, и вы также должны поставить li с в обратном порядке, вы хотите, чтобы они появились.

источник

2014-07-22 13:23:58 jackcogdill

CSS: наведите эффект на текущих и предыдущих элементов

ответ

Смежные вопросы