Change parent div to a different background when hovering over individual child divs

Question

I'm seeing the solutions to accomplish this when dealing with only one desired hover effect, but I want to have four child divs that each change the main parent div's background to a separate image.

I'm assuming this isn't possible with CSS.

<div id="buttonBox">
   <div id="schedBox">
     <a href="#">Schedule</a>
   </div>
   <div id="transBox">
     <a href="#">Transformation</a>
   </div>
   <div id="destBox">
     <a href="#">Destination</a>
   </div>
   <div id="inspirBox">
     <a href="#">Inspiration</a>
   </div>
</div>

Alternatively, I could have the child divs each have a different background. Hovering one child div would change all child div backgrounds to a separate colour, but I couldn't figure out how to have a hover on the 2nd div affect the previous div.. only subsequent siblings.

Have a read of these: http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530 and http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — 3dgoo, Nov 25 '12 at 21:55

score 2 · Answer 1 · answered Nov 28 '12 at 12:56

While the actual parent selector is not possible through CSS, you can “hack” it for your case using extra elements and positioning.

What you need is to change the background based on what element is hovered — ok! Let's add pseudo-elements (or normal elements if you'll need IE support) and position them over the parent using absolute positioning and positive z-index:

#buttonBox {
    position: relative;
    z-index: 1;
}

#buttonBox > div:before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

Those positioned elements should have negative z-index, so they would be placed under all other content, but over the parent element's background.

This way you could add rules like

#schedBox:hover:before  { background: lime;   }
#transBox:hover:before  { background: red;    }
#destBox:hover:before   { background: orange; }
#inspirBox:hover:before { background: yellow; }

And the pseudo-background of the parent would change on hover!

The only thing to know is that there shouldn't be any elements with non-static position between the parent and the elements with the background role.

Here is the live example at dabblet

score 2 · Answer 2 · edited Dec 25 '12 at 00:12

2

Yes, it is possible. Try this:

#schedBox:hover, #buttonBox{
   background: red;
}

#schedBox:hover{
   background: green;
}

edited Dec 25 '12 at 00:12

Extra Savoir-Faire

5,986
4
26
46

answered Dec 24 '12 at 23:53

prium

169
11

score 0 · Answer 3 · answered Nov 25 '12 at 22:25

0

Sadly there are no parent selectors in CSS.

You would have to use javascript to achieve what you want to do.

answered Nov 25 '12 at 22:25

Billy Moat

19,702
6
42
37

Change parent div to a different background when hovering over individual child divs

3 Answers3

Linked

Related