change background of parent div on hover

Question

I have this code:

Answer 1

The following snippet should do the job:

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

Answer 2

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

Answer 3

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>

Answer 4

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 5

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 6

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