jQuery / CSS приоритет при установке / переопределении цвета фона

Question

Я использую jQuery для addClass до div ... но цвет фона не изменится.Я предполагаю, что это потому, что ранее ему был присвоен цвет фона в CSS?Другие свойства (границы) в классе hover появляются при наведении курсора, поэтому addClass работает.

Как / как мне сделать эту работу?

jQuery

$('.pick1-box').hover( 
    -> $(this).addClass('hover')
    -> $(this).removeClass('hover')
    )

CSS

.pick1-box, .pick2-box {
    ...
    background: #eee;
    ...
}

.hover {
    background-color: yellow;
    border: 1px solid red;
}

html

...
<li class='nominee clearfix' id='146'>
  <div class='candidate'>
    <img alt="Enders" height="80" src="/assets/25803sm.jpg" />
    Dick Waddington
  </div>
  <div class='pick-boxes'>
    <div class='pick1-box'>
      1
    </div>
    <div class='pick2-box'>
      2
    </div>
  </div>
</li>
...

Answer 1

Это зависит от того, как вы загружаете jquery и код, но попробуйте это:

    .hover {
    background-color: yellow !important;
    border: 1px solid red;
}

Answer 2

Проблема, как вы заявили, заключается в том, что стиль был переопределен в атрибуте style затрагиваемого элемента.У вас есть несколько вариантов:

1. Не изменяйте css элемента напрямую.
2. Используйте! Важный для настроек, которые вам абсолютно необходимыпереопределить стили элемента.
3. Измените CSS элемента напрямую, но удалите его, как только вы закончите с ним.

Answer 3

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

$('.pick1-box').hover($(this).attr('style', 'background-color: yellow;border: 1px solid red;'),$(this).removeAttr('style'));

, поскольку стили элементов имеют приоритет.

Answer 4

Вы можете сделать второе правило более конкретным:

.pick1-box.hover, .pick2-box.hover {
    background-color: yellow;
    border: 1px solid red;
}

css специфичность

Предполагается, что ваша .hover css действительно имеет место до правила .pick1-box, поскольку они имеют одинаковую специфичность, а та, которая возникает позже, будет иметь приоритет.