CODEWITHSUNDEEP
csshovercss-selectorsparent-child
Andrew
Andrew

Reputation: 55

Changing other child elements when hovering over first child using css

I am trying to affect the third child using hover on the first child of a div. Does anyone know of a way to do this just using css?

http://jsfiddle.net/boou28/fNxGa/

CSS

    /* works */
#firstp + p
{
background:#dddddd;
}

#firstp:hover + p
{
background:#ff0000;
}

#firstp + p + p
{
background:#dddddd;
}    

    /* doesnt work */

#firstp:hover + p + p
{
background:#ff0000;
}


HTML

<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>

Upvotes: 3

Views: 2688

Answers (2)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

http://jsfiddle.net/fNxGa/5/

Change your 

#firstp:hover + p + p

to

#firstp:hover ~ p ~ p

~ works the same as + selector, but ~ is less restrictive, as it selects any p that follows the hovered element. With + only the next sibling (after the hovered element) is selected.

Upvotes: 3

Barnee
Barnee

Reputation: 3389

I've commented out the 

#firstp:hover + p
{
   background:#ff0000;
}

and it seems to be working (even without the comment):
Fiddle

Upvotes: 1

Related Questions