cambiar el fondo del div padre en el hover

Tengo este codigo

La imagen se centra en el centro de la división, ¿cómo puedo cambiar el fondo de la división cuando me desplazo sobre la imagen?

Solo sé cómo cambiar las propiedades de la imagen cuando paso el mouse por encima del div.

Preferiría no usar jQuery, pero no me importa demasiado.

¡Gracias!

Usted no puede CSS no tiene ninguna forma de seleccionar el “elemento padre”:

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

Preferiría no usar jQuery, pero no me importa demasiado.

Uso: http://jsfiddle.net/KHc6X/

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

Los selectores de CSS no pueden ascender, por lo que deberá utilizar JavaScript.

Lo tagste jquery así que aquí hay una respuesta jQuery.

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

Solución: La solución es usar Posicionamiento Absoluto. Vea el fragmento a continuación. ¡Agregar una identificación de “orangeImg” hace la vida un poco más fácil!

Crea un div tenedor con posicionamiento relativo. Dentro de este div coloque sus divs “orangeImg” y “orangeBG”. Ambos tendrán posicionamiento de absoluto. El divisor orangeBG también deberá recibir las propiedades de ancho y alto, ya que no contendrá ningún elemento. Usando la propiedad del índice z, se colocarán los divs, con el div Img en la parte superior.

Agregando una clase .target a la división orangeBG, puede usar el selector de hermanos “~” para seleccionar cualquier hermana de la división orangeImg al pasar el cursor. El único hermano aquí es el div OrangeBG. Por lo tanto, el fondo cambiará, solo cuando la imagen se desplace por el mouse. JSpiddle aquí

La mejor de las suertes,

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

El siguiente fragmento de código debe hacer el trabajo:

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

No puedes hacer esto en CSS.

¿Qué pasa con JavaScript estándar, en lugar de JQuery?

 

Si puede agregar un elemento ficticio adyacente a la imagen, entonces esto se puede hacer usando este truco CSS2 puro , dando como resultado este ejemplo de violín .

Margen:

 

Hoja de estilo:

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