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!

Answer 1

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

Answer 2

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

Answer 3

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