change background of parent div on hover

Question

I have this code:

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

The image is centred in the middle of the div, how can I change the div's background when I hover over the image?

I only know how to change the image properties when I hover over the div.

Would prefer not to use jQuery, but don't mind too much.

Thanks!

Just edited my question, would prefer not to but jQuery is on the page already so not the end of the world. — 472084, Jun 10 '11 at 13:03
Too bad there's no parent selector in CSS. (http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child). If using jQuery is not a problem the link I posted might be a duplicate. — Kevin, Jun 10 '11 at 13:04

score 13 · Accepted Answer · answered Jun 10 '11 at 13:07

13

You can't. CSS does not have any way to select the "parent element":

http://snook.ca/archives/html_and_css/css-parent-selectors

Would prefer not to use jQuery, but don't mind too much.

Use: http://jsfiddle.net/KHc6X/

$('.thumb_image_holder_orange > img').hover(function(){
    $(this).parent().toggleClass('hover');
})

answered Jun 10 '11 at 13:07

thirtydot

210,355
44
377
337

Accepted for the ability to remove the background too which I forgot to mention. Thanks. – 472084 Jun 10 '11 at 13:21
You're welcome. I guessed you wanted it like that because you were originally after the functionality of `:hover` from CSS. – thirtydot Jun 10 '11 at 13:23

score 5 · Answer 2 · answered Jun 10 '11 at 13:05

CSS selectors can not ascend, so you will need to use JavaScript.

You tagged it jquery so here is a jQuery answer.

$('.thumb_image_holder_orange img').mouseover(function() {
    $(this).parent().css('backgroundImage', 'url(/whatever/you/want.png)');
});

Alanto Monteiro Jones · Answer 3 · 2014-11-01T21:22:23.127

Solution: The solution is to use Absolute Positioning. See the Snippet below. Adding an ID of "orangeImg" makes life a little easier!

Create a holder div with relative positioning. Inside this div place your "orangeImg" and "orangeBG" divs. Both will have positioning of absolute. The orangeBG div will also need to be given width and height properties as it won't contain any elements. Using the z-index property you will layer the divs, with the Img div on top.

Adding a .target class to the orangeBG div, you can then use the sibling selector "~" to then select any sibling of the orangeImg div on hover. The only sibling here is the orangeBG div. Therefore the background will change, only when the image is hovered! JSfiddle here

Best of luck,

Alan

#holder {position: relative; width: 200px; height:100px;}
#orangeImg {position:absolute; top:10px; right:10px; z-index:9999;}
#orangeBG {position:absolute; top:0px; right:0px; z-index:1; background-color:#353;width: 200px; height:100px;}
#orangeImg:hover ~ .target {background-color:#621;}

<div id="holder">
  <div id="orangeImg" class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
  </div>
  <div id="orangeBG" class="target">
  </div>
  
</div><!-- end holder -->

Connell · Answer 4 · 2011-06-10T13:14:56.407

2

You can't do this in CSS.

What about standard JavaScript, rather than JQuery?

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" onmouseover="this.parentNode.style.backgroundColor = '#f00'" onmouseout="this.parentNode.style.backgroundColor = '#fff'" />
</div>

edited Jun 10 '11 at 13:14

answered Jun 10 '11 at 13:04

Connell

12,845
9
53
84

score 2 · Answer 5 · answered Jun 10 '11 at 13:06

2

The following snippet should do the job:

$('.thumb_image_holder_orange > img').hover(function() {
    $(this).parent().css('background-color', '#f00');
});

answered Jun 10 '11 at 13:06

Kevin

5,398
3
26
40

score 1 · Answer 6 · edited May 23 '17 at 12:15

If you can add a dummy element adjacent to the image, then this can be done by using this pure CSS2 trick, resulting in this example fiddle.

Markup:

<div class="thumb_image_holder_orange">
    <div></div>
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

Style sheet:

.thumb_image_holder_orange {
  background: orange;
  position: relative;
}
.thumb_image_holder_orange:hover {
  background: red;
}
.thumb_image_holder_orange div:hover {
  background: orange;
}
.thumb_image_holder_orange img {
  position: absolute;
}

change background of parent div on hover

6 Answers6

Linked