CSS приоритет цвета фона

Question

Я меняю цвета строк таблицы при наведении курсора с помощью jQuery, и я заметил, что в следующих случаях я получаю разные результаты.

CSS выглядит следующим образом:

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

Теперь я делаю эффект наведения с помощью jQuery, используя этот код:

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

Странно то, что когда я нахожу указатель мыши на строке с class="normalcolor", цвет фона меняется с .hovercolor. Однако, когда я наведите курсор на строку class="reddishcolor", цвет фона не изменится.

Это нормально? И если да, то почему? Это как-то связано с цветами?

Спасибо!

Answer 1

Вы указали классы CSS именно в таком порядке, или класс .reddishcolor был указан в последний раз?

Когда к элементу применяется более одного стиля, используется наиболее конкретное правило.Если правила одинаково специфичны (как в вашем случае), используется последнее правило.

Если вы не можете изменить порядок правил CSS, вы можете сделать класс наведения более конкретным, например, с помощьюуказав также имя элемента:

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

Answer 2

Вы должны удалить старый класс CSS, который определяет цвет по умолчанию, а затем добавить новый класс, который определяет цвет при наведении:

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

... Или вы можете поиграть с !importantКлючевое слово CSS, чтобы ваш цветовой класс при наведении указывал на приоритет над другими классами, прикрепленными к элементу:

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

Примечание. Ключевое слово !important не поддерживается в IE6 и FireFox 1.X.

... Или вы могли бы более точно определить область своего цветового класса при наведении:

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