Priorytet koloru tła CSS - css, hover, background-color

Zmieniam kolory wierszy tabeli po najechaniu kursorem na jQuery i zauważyłem, że w poniższych przypadkach otrzymuję inne wyniki.

CSS wygląda następująco:

.normalcolor {
background-color: #dedede;
}
.reddishcolor {
background-color: #ffc59c;
}
.hovercolor {
background-color: #f1e1c0;
}

Teraz robię efekt hover z jQuery, używając tego kodu:

$("table.withhover tr").hover(function(){
$(this).addClass("hovercolor");
}, function(){
$(this).removeClass("hovercolor");
});

Dziwne jest to, że po najechaniu na jeden wiersz z class="normalcolor", kolor tła zmienia się na kolor z .hovercolor. Jednak po najechaniu na wiersz z class="reddishcolor" kolor tła się nie zmienia.

Czy to normalne? A jeśli tak, dlaczego? Czy ma coś wspólnego z kolorami?

Dzięki!

Odpowiedzi:

7 dla odpowiedzi № 1

Czy określono klasy CSS w dokładnie tej kolejności lub jest to .reddishcolor klasa określona jako ostatnia?

Jeśli do elementu stosuje się więcej niż jeden styl, używana jest najbardziej szczegółowa reguła. Jeśli reguły są równie szczegółowe (jak w twoim przypadku), używana jest najnowsza reguła.

Jeśli nie możesz zmienić kolejności reguł CSS, możesz uczynić klasę hover bardziej szczegółową, na przykład określając również nazwę elementu:

tr.hovercolor {
background-color: #f1e1c0;
}

---

0 dla odpowiedzi nr 2

Musisz usunąć starą klasę CSS, która definiuje domyślny kolor, a następnie dodać nową klasę, która definiuje kolor wskaźnika:

$().hover(function ()
{
$(this).removeClass("default-color-class").addClass("hover-color-class");
});

... Lub możesz bawić się z !important Słowo kluczowe CSS, aby klasa kolorów w dymku miała pierwszeństwo przed innymi klasami dołączonymi do elementu:

.hover-state { color: #fff !important; }

Zanotuj !important słowo kluczowe nie jest obsługiwane przez IE6 i FireFox 1.X.

... Możesz też bardziej szczegółowo określić zakres swojej klasy kolorów:

.default-state { ... };
table .hover-state { ... }; /* more specific rules override less specific ones */

---