CODEWITHSUNDEEP
javascriptjquerycsshtml
user3182138
user3182138

Reputation:

css :hover effect on current and previous elements

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>

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;

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/

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.

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

Upvotes: 5

Views: 14098

Answers (2)

jackcogdill
jackcogdill

Reputation: 5122

Posting my answer for reference (to those who come viewing this later like I did).
Here is a solution that doesn't use :before or :after.

http://jsfiddle.net/nLCZK/

It uses float: right for all the lis, and you also have to put the lis in opposite order you want them to appear.

Upvotes: 0

coma
coma

Reputation: 16659

http://jsfiddle.net/coma/PLBYG/2/

or

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

or!!!

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

Upvotes: 18

Related Questions