Buonasera, mi sono accorto del seguente problema.
ho una homepage con un menu in linea e nel corpo delle foto.
Ho settato il css del menu in questa maniera.
#menu a{
display:inline-block;
width:112px;
height:50px;
padding:0;
margin:0;
line-height: 80px;
font-size:1.2em;
color:#838282;
letter-spacing: 1px;
}
#menu a:hover{
color:red;
background-image:url(../imgs/a2.png);
background-position: 0px -59px
}
come vedete quando vado sopra ad una voce del menu, questa si
deve colorare di rosso e deve cammbiare lo sfondo.
Fin qui tutto bene funziona tutto.
Il problema è questo, ho creato un codice jquery che permette
che ogni qual volta passo sopra ad una foto del corpo, in realtà si
deve colorare la rispettiva voce del menu.
$("div.captionbox a").hover(
function(){
$(this).find("span").fadeIn("slow");
$(this).find("img").fadeTo( "slow", 0.5 );
$("a."+$(this).find("span").attr("class")).css("co lor","red");
},
function(){
$(this).find("span").fadeOut("fast");
$(this).find("img").fadeTo( "fast", 1 );
$("a."+$(this).find("span").attr("class")).css("co lor","#838282");
}
);
Le varie voci del menu si colorano a dovere
$("a."+$(this).find("span").attr("class")).css("co lor","red");
ma il problema avviene quando tolgo il mouse dall0immagine
e viene eseguita tale istruzione
$("a."+$(this).find("span").attr("class")).css("co lor","#838282");
il colore ritorna quello iniziale ma vedo che il codice css relativo all'hover
#menu a:hover{
color:red;
background-image:url(../imgs/a2.png);
background-position: 0px -59px
}
viene cancellato e quindi se col mouse ci passo sopra non si colora più di rosso.
come mai ?
grazie a tutti
