jQuery .addClass не имеет никакого эффекта

Question

товарищи по кодированию, только что натолкнулся на странное (по крайней мере для меня) поведение для метода .addClass.Я пытаюсь выделить элемент (div), когда мышь наводит на него курсор, используя метод .addClass и класс .highlight, который изменяет цвет фона div.(Я использую jQuery вместо метода css: hover по причине.)

Код работает, значит, класс .highlight добавляется в div, однако цвет не меняется.цвет изменится только тогда, когда в классе CSS по умолчанию для div НЕ задан фоновый цвет.другими словами, если div определен с классом, который включает, например, background-color: white;класс .highlight добавлен, но цвет не меняется.

Это нормально или я что-то упустил?на данный момент я использую .css ('background-color', ....), чтобы получить подсветку, но мне любопытно, почему метод .addClass не работает.

спасибо.

Answer 1

Ваш оригинальный класс CSS переопределяет новый.

Вы можете предотвратить это, добавив !important к правилу наведения, или сделав его селектор более конкретным, или переместив его после исходного классаCSS.

Answer 2

Я подозреваю, что проблема заключается в том, как применяется исходный цвет фона, и относится к приоритету и специфичности каскада .Селектор CSS для исходного цвета фона, вероятно, более специфичен, чем класс, и имеет приоритет.Например, селектор, который определяет элемент по id или по его позиции в DOM, более специфичен, чем простой указатель класса.Создание объявления класса !important или уменьшение специфичности исходного селектора CSS (если это возможно) должны сработать.

Answer 3

Может быть, вам следует попробовать установить флаг !important в CSS.

.highlight {
  background-color: #ff0000 !important;
}

Answer 4

Если у вас есть два класса, и они оба задают цвет фона, то какой цвет используется, зависит от того, где определены стили для этих двух классов.

Answer 5

попробуй

background-color:#f00 !important;