Cambiar imagen al pasar el mouse en un div

[aagguuu]

Bueno, yo quiero que al pasar el mouse por 1 div se cambie el background del mismo, yo tengo este code:

Código HTML:

#on a {
		background-image:url(../imagenes/off.gif);
		margin: 1px;
		background-color: #f2f2f2;
   		width: 115px;
		height: 90px;
}
#on a:hover {
		background-image:url(../imagenes/on.gif);
		margin: 1px;
		background-color: #f2f2f2;
   		width: 115px;
		height: 90px;
}

pero cuando veo el index en el firefox no se ve, y en el dreamweaver tampoco, ni se ve el div. Esta bien el codigo que puse? que tengo que cambiar? Espero que me puedan ayudar, gracias de antemano :)

[gVenom]

que tal asi


En el CSS

1. a img {visibility:hidden}
2. a:hover img {visibility:visible}

En el html:

Código HTML:

1.	<a href="pagina.html">Enlace<img src="imagen.jpg" /></a> 

solo le pones la imagen de off como fondo al div

[sanxuan]

El código que muestras no afecta a un <div> sino a un enlace <a>. Si lo que tienes es algo como esto:
<div id="on">.....</div>
Puedes usar un CSS como éste:

Código CSS:

#on {
        background-image:url(../imagenes/off.gif);
        margin: 1px;
        background-color: #f2f2f2;
        width: 115px;
        height: 90px;
}
#on:hover {
        background-image:url(../imagenes/on.gif);
        /* Las propiedades que no cambian no hace falta volver a definirlas */
}
 

[aagguuu]

Gracias a los 2, me sirvio la respuesta de sanxuan.
@sanxuan si me referia a <div id="on"> </div> XD Suerte !!
Gracias