Hola, hice una web dónde las opciones tienen una imagen de fondo y al pasar el mouse por encima cambia por otra.
El problema es que demora en cambiar la segunda imagen cuando el mouse está sobre la opción.
Lo verán aquí:
www.diariocambio.com.uy
¿Qué debo hacer para que no demore?
Código:
<div class="menu">
<a href="index.php?seccion=inicio&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "inicio") {print "class='actual'";} ?>id="inicio">Inicio</a>
<a href="index.php?seccion=locales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "locales") {print "class='actual'";} ?>id="locales">Locales</a>
<a href="index.php?seccion=nacionales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "nacionales") {print "class='actual'";} ?>id="nacionales">Nacionales</a>
<a href="index.php?seccion=policiales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "policiales") {print "class='actual'";} ?>id="policiales">Policiales</a>
<a href="index.php?seccion=deportes&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "deportes") {print "class='actual'";} ?>id="deportes">Deportes</a>
<a href="index.php?seccion=sociales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "sociales") {print "class='actual'";} ?>id="sociales">Sociales</a>
<a href="index.php?seccion=funebres&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "funebres") {print "class='actual'";} ?>id="funebres">Fúnebres</a>
<a href="index.php?seccion=politica&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "politica") {print "class='actual'";} ?>id="politica">Política</a>
<a href="index.php?seccion=rurales&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "rurales") {print "class='actual'";} ?>id="rurales">Rurales</a>
<a href="index.php?seccion=cartas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "cartas") {print "class='actual'";} ?>id="cartas">Cartas</a>
<a href="index.php?seccion=columnistas&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "columnistas") {print "class='actual'";} ?>id="columnistas">Columnistas</a>
<a href="index.php?seccion=varios&fechaedicion=<?=$fechaedicion?>&bi=<?=$bi?>" <? if($seccion == "varios") {print "class='actual'";} ?>id="varios">Varios</a>
</div>
Código:
.menu a
{
display:block;
background-position:center 5px;
background-repeat:no-repeat;
width:80px;
height:20px;
float:left;
font-size:13px;
color:#FFFFFF;
text-align:center;
font-family:Arial;
text-decoration:none;
padding:43px 0 0 0;
}
.menu .alt { display:none; }
.menu a#inicio { background-image: url(../images/inicio_color.png); background-color:#202020;}
.menu a#locales { background-image: url(../images/locales_blanco.png); background-color:#333333;}
.menu a#nacionales { background-image: url(../images/nacionales_color.png); background-color:#202020;}
.menu a#policiales { background-image: url(../images/policiales_blanco.png); background-color:#333333;}
.menu a#deportes { background-image: url(../images/deportes_color.png); background-color:#202020;}
.menu a#sociales { background-image: url(../images/sociales_blanco.png); background-color:#333333;}
.menu a#funebres { background-image: url(../images/funebres_color.png); background-color:#202020;}
.menu a#politica { background-image: url(../images/politica_blanco.png); background-color:#333333;}
.menu a#rurales { background-image: url(../images/rurales_color.png); background-color:#202020;}
.menu a#cartas { background-image: url(../images/cartas_blanco.png); background-color:#333333;}
.menu a#columnistas { background-image: url(../images/columnistas_color.png); background-color:#202020;}
.menu a#varios { background-image: url(../images/varios_blanco.png); background-color:#333333;}
.menu a:hover {
font-weight:bold;
padding:40px 0 0 0;
border-bottom-width: 3px;
border-bottom-style: solid;
}
.menu a#inicio:hover { background-image: url(../images/inicio_blanco.png); border-bottom-color:#F9CD00;}
.menu a#locales:hover { background-image: url(../images/locales_color.png); border-bottom-color: #ffffff;}
.menu a#nacionales:hover { background-image: url(../images/nacionales_blanco.png); border-bottom-color:#F9CD00;}
.menu a#policiales:hover { background-image: url(../images/policiales_color.png); border-bottom-color: #ffffff;}
.menu a#deportes:hover { background-image: url(../images/deportes_blanco.png); border-bottom-color: #F9CD00;}
.menu a#sociales:hover { background-image: url(../images/sociales_color.png); border-bottom-color: #ffffff;}
.menu a#funebres:hover { background-image: url(../images/funebres_blanco.png); border-bottom-color: #F9CD00;}
.menu a#politica:hover { background-image: url(../images/politica_color.png); border-bottom-color: #ffffff;}
.menu a#rurales:hover { background-image: url(../images/rurales_blanco.png); border-bottom-color: #F9CD00;}
.menu a#cartas:hover { background-image: url(../images/cartas_color.png); border-bottom-color: #ffffff;}
.menu a#columnistas:hover { background-image: url(../images/columnistas_blanco.png); border-bottom-color: #F9CD00;}
.menu a#varios:hover { background-image: url(../images/varios_color.png); border-bottom-color: #ffffff;}
.actual {
color:#3300CC;
font-weight:bold;
}
Gracias desde ya por las respuestas.
Saludos