No me sale rollover CSS

[only_skating]

Hola, no consigo que me funcione el rollover únicamente con css que busco, no sé donde esta el fallo, por si esta muy mal planteado, lo que quiero es que una imagen se muestre y al pasar el raton por encima se muestre otra.un saludo y gracias de antemano

Código HTML:

 <div class="fiestas"><a href="#"></a></div> 

Código HTML:

.fiestas{
	float:left;
	width:340px;
	height:235px;
	display:block;
	}
.fiestas a{
	background-image:url(fiestas.jpg);
	display:block;
	text-decoration:none;
	width:100%;
	}
.fiestas a:hover{
	background-image:url(playas.jpg);
	}

[pzin]

Para estos casos conviene más usar Sprites, que no es sino usar una sola imagen, con esas dos integradas y luego simplemente en el :hover cambiar el valor de background-position.

Por ejemplo, algo así:

Código CSS:

.fiestas a {
  background-image: url(fiestas_playas.jpg);
}
 
.fiestas a:hover {
  background-position: -100px;
}
 

[only_skating]

el problema es que ni si quiera me aparece la imagen de fondo a no ser que la coloque en .fiestas{ }

[pzin]

Ah no me había fijado en eso. Pensé que simplemente no te cargaba la imagen al hacer el :hover.

El problema es que tu enlace no tiene altura, ya que no tiene contenido. Si necesitas que ocupa la misma altura que div.fiestas entonces ponle un:

Código CSS:

.fiestas a {
  height: 100%;
}
 

Y si es otra altura pues ya la indicas en pixeles o cualquier otra cosa que necesites.