Duda con cambiar color div onmouseover

[Dago]

Gente,
Tengo el siguiente código.

Código:

<div id="cuadro" style="background-color: #000;">
<img src="imagen.png" width="196px" height="40px" alt="Imagen sitio"/>
<br />
<span style="padding-left: 7px;">Esto es un cuadro</span>
</div>

Lo que quiero es que al colocar el mouse encima del DIV, cambie el color de fondo de TODO lo que se encuentra en el, quedando tambien del color nuevo, el fondo de la imagen que es un PNG transparente.

He probado con CSS + A y solo logro cambiar la linea y media de texto "Esto es un cuadro", sin que afecte al DIV en su TOTALIDAD.

Alguien me podría dar una mano.

Mil gracias.

[ArturoGallegos]

para empezar no coloques CSS directamente sobre el HTML colocalo en una hoja CSS o en el head

segunda asigna una ID a tu div y despues puedes usar por ejemplo:

Código CSS:

#layer:hover{}
#layer:hover *{}
#layer:hover img{}
#layer:hover a{}
#layer:hover p{}
 

y una larga lista de etc segun el elemento que necesites afectar

[tapuntdesign]

Usando el pseudoselector hover se establecen las propiedades de tal elemento en un evento mouseover

Y de paso, todos los elementos visibles de la web tienen como propiedad background, transparent, predeterminadamente, lo que significa que son transparentes y por tanto, una propiedad de color de fondo definida para un nodo padre, afecta a todos los hijos. Si uno de los hijos tiene un color distinto de transparent se aplica tal color a sí mismo y sus hijos a excepción de este, y así sucesivamente.

Código CSS:

<* se establece el color para una clase */
#clase {
 
background: red;
 
}
/*  se añade una excepción para uno de los elementos hijos. En este caso, directo */
 
#clase > div:first-child {
 
background: green;
 
}