Demora en cambiar la imagen al pasar el mouse

[ci2000]

Hola, hace unos días hice esta misma consulta. Si bien jomaruro me contestó, no he podido solucionarlo.

Mi problema es que al pasar el mouse sobre una de las opciones, en IE demora cierto tiempo en mostrar lo que está en el hover. En cambio en FF no me da problemas.

¿Cómo lo puedo resolver?

Código:

	<div class="menu">
	  <a href="index.php?seccion=inicio&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "inicio") {print "class='actual'";} ?>>Inicio</a>	  
	  <a href="index.php?seccion=locales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "locales") {print "class='actual'";} ?>>Locales</a>	  
	  <a href="index.php?seccion=nacionales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "nacionales") {print "class='actual'";} ?>>Nacionales</a>
	  <a href="index.php?seccion=policiales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "policiales") {print "class='actual'";} ?>>Policiales</a>	  
	  <a href="index.php?seccion=deportes&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "deportes") {print "class='actual'";} ?>>Deportes</a>
	  <a href="index.php?seccion=sociales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "sociales") {print "class='actual'";} ?>>Sociales</a>
	  <a href="index.php?seccion=cultura&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "cultura") {print "class='actual'";} ?>>Cultura</a>	  
	  <a href="index.php?seccion=funebres&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "funebres") {print "class='actual'";} ?>>Fúnebres</a>
	  <a href="index.php?seccion=politica&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "politica") {print "class='actual'";} ?>>Política</a>
	  <a href="index.php?seccion=rurales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "rurales") {print "class='actual'";} ?>>Rurales</a>
	  <a href="index.php?seccion=cartas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "cartas") {print "class='actual'";} ?>>Cartas</a>
	  <a href="index.php?seccion=columnistas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "columnistas") {print "class='actual'";} ?>>Columnistas</a>
	  <a href="index.php?seccion=latidos&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "latidos") {print "class='actual'";} ?>>Latidos</a>
	  <a href="index.php?seccion=offtherecord&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "offtherecord") {print "class='actual'";} ?>>Off the record</a>	  	  	  
	  <a href="index.php?seccion=varios&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "varios") {print "class='actual'";} ?>>Varios</a>
	</div>

Código:

.menu a
	{
	background-color:#272E36;
	display:block;
	width:auto;
	height:25px;
	float:left;
	font-size:12px;
	color:#FFFFFF;
	text-align:center;
	font-family:Arial;
	font-weight:bold;
	text-decoration:none;
	padding:10px 8px 2px 7px;
	background-image: url(../images/fondo_menu.png);
	background-repeat: repeat-x;
	background-position: center 27px;
}
	
.menu .alt { display:none; }

.menu a:hover {
	padding:10px 8px 2px 7px;
	background-image: url(../images/fondo_menu_activo.png);
	background-repeat: no-repeat;
	background-position: center 27px;
}

Gracias desde ya por las respuestas.
Saludos

[Impostor]

Probablemente la imagen sea pesada, y eso es el motivo de la demora. Realmente, esto que te sucede es totalmente ajeno a css. Trata de reducir el peso de la imagen y si persiste, usa sprites.

Saludos¡¡

[jomaruro]

Hola:

Para solucionar eso deberías utilizar sprites en css.

Saludos.