CODEWITHSUNDEEP
css
Alon Shmiel
Alon Shmiel

Reputation: 7121

change siblings background on mouse over

I have an ul with 3 li-s:

<ul>
    <li area="london"></li>
    <li></li>
    <li></li>
</ul>

I want to do the next thing (with CSS):

when the mouse overs the li with the attribute area, I want to change the backgrounds of all of his siblings.

if the mouse overs that doesn't have an attribute of area, change only his background.

li {
    background:rgb(237, 237, 255);
}

li[area] {
    background:rgb(237, 237, 255);
}

Upvotes: 0

Views: 31

Answers (1)

Dhiraj
Dhiraj

Reputation: 1871

I tried few things and I think I got the solution. Since you wanted this to happen with CSS only, here's the JS Fiddle Demo link where you can see it in action. 

li, 
li[area]:hover  {
background:rgb(237, 237, 255);
}

li:hover,
li[area]:hover + li,
li[area]:hover + li + li {
background: rgb(237, 237, 230);
}

Upvotes: 1

Related Questions