jQuery .addClass не действует

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

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

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

Благодарю.


jquery addclass
person djeetee    schedule 01.02.2011    source источник
comment
Не видя вашего CSS, трудно сказать наверняка, но я предполагаю, что это может быть проблема специфики.   -  person David says reinstate Monica    schedule 01.02.2011

Ответы (5)


arrow_upward
11
arrow_downward

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

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

person SLaks    schedule 01.02.2011
comment
Спасибо. Это помогло. @Andy, @tvanfosson, @KARASZI, @Ned, большое спасибо, что откликнулись на мой вопрос. - person djeetee; 02.02.2011
comment
Была аналогичная проблема при работе с jQuery Mobile (бета). Использование !important тоже помогло. Спасибо! - person Courtney Christensen; 26.07.2011

arrow_upward
2
arrow_downward

Возможно, вам стоит попробовать установить флаг !important в CSS.

.highlight {
  background-color: #ff0000 !important;
}
person KARASZI István    schedule 01.02.2011

arrow_upward
2
arrow_downward

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

person tvanfosson    schedule 01.02.2011

arrow_upward
1
arrow_downward

пытаться

background-color:#f00 !important;
person Andy    schedule 01.02.2011

arrow_upward
1
arrow_downward

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

person Ned Batchelder    schedule 01.02.2011