foglio di stile CSS più forte di jquery addClass?

Question

Ehi ragazzi questa cosa mi fa impazzire. Ho definito nel mio foglio di stile:

ul#menuCnt li a {
   color:"red";
}

Se voglio fare un effetto hover, usando jquery questo non cambierà alcun colore.

$("ul#menuCnt li a").hover(function() {
        $(this).addClass("brown");
    }, function() {
        $(this).removeClass("brown");
    });

Sono davvero confuso. Se non definisco un colore nel mio foglio di stile CSS, hovereffect funziona.

Spero che tu mi possa aiutare. Ragazzi, mi avete aiutato moltissimo imparando jquery e css :)

Grazie!

Answer 1

Secondo le priorità dei CSS, se la tua classe .brown è definita in questo modo nel tuo file CSS:

.brown{}

Le regole interne non sovrascriveranno le stesse regole nel tuo selettore #.

Puoi farli sovrascrivere usando la parola chiave ! important .

.brown {
    color: brown !important;
}

Anche se questa non è la soluzione migliore qui, funzionerà ... Meno usi! Importante, più il tuo codice sarà facile da leggere.

Vedi http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html .

Answer 2

Hai un selettore .brown nel tuo CSS? Anche un tag a potrebbe essere una cattiva scelta perché ha un ottimo selettore : hover integrato.

Answer 3

Non vedo che menzioni un problema con l'utilizzo di css per farlo, quindi perché non provi:

ul#menuCnt li a:hover {
   color:"brown";
}

Modifica: dovrebbe effettivamente funzionare in ie6, visto che è un'ancora :) Sarebbe molto più veloce dell'uso di JavaScript per farlo.

Answer 4

Qui hai un identificatore di elemento molto specifico. Questo è considerato più importante di un semplice selettore di classi .brown, e quindi non ha molto effetto.

Vedi ad esempio this sito per maggiori informazioni

Answer 5

Perché non usi la pseudoclass CSS : hover ? Ad esempio:

#menuCnt li a {
    color: "red";
}

#menuCnt li a:hover {
    color: "brown";
}

Inoltre, l'utilizzo di " UL " nel selettore non dovrebbe essere necessario. Non è possibile che ci siano altri elementi nella pagina con l'ID " menuCnt " poiché l'attributo ID deve essere univoco nel DOM.

Answer 6

Ho fatto alcuni test con IE / FF e ho scoperto che l'inclusione dell'ID dell'elemento nel foglio di stile (ul # menuCnt) impedisce a JQuery di sovrascrivere quello stile - almeno con i metodi che ho impiegato (toggleClass, addClass, removeClass, ecc.) .

Se assegni la classe all'elemento nel tag (invece di specificare l'ID nel foglio di stile) puoi sovrascriverla con JQuery.

Se rimuovi l'ID dallo stile puoi sovrascriverlo con JQuery (non molto utile ma buono per dimostrare il comportamento).

In effetti, se lasci l'ID nel tuo foglio di stile e provi ad assegnare una classe diversa all'interno del tag, vedrai comunque la classe associata all'ID nel foglio di stile.

NOTA: Il post di Vincent suggerisce perché vediamo questo comportamento.

Sono anche d'accordo con il suggerimento di Exhuma di usare: passa il mouse sul tuo CSS.