jquery modifica il CSS

[godmetal]

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

[Xinod]

quando setti una proprieta' css via javascript e' come se definissi per quell' elemento il suo stile in linea,
in condizioni normali, lo stile in linea e' piu' "forte" di uno stile definito in una regola esterna per questo non cambia piu'

Per evitare di impelagarsi in situazioni del genere e per mantenere una certa continuita' d' approccio tra javascript e css e' consigliabile aggiungere o rimuovere classi via javascript piuttosto che modificare singole proprieta' css,
nel css avrai quindi gia' pronta una regola apposita che copra la condizione, per esempio

#menu a.sopra, #menu a.sopra:hover {
color:red
}

e in javascript aggiungi e rimuovi solo la classe "sopra"

ciao

[godmetal]

Ti ringrazio molto per avermi dato questa conferma , mi stavo sbattendo pensando che
avessi sbagliato a scrivere il codice.
Grazie mille