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

您可以使第二条规则更具体：

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

css specificity

这假设您的.hover css实际上发生在.pick1-box规则之前，因为它们具有相同的特异性，稍后出现的将具有优先权。

Answer 3

您可以尝试重新订购或向CSS添加重要内容，或者您可以执行以下操作：

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

因为元素样式优先。

Answer 4

正如您所说，问题是因为样式已在受影响元素的style属性中被覆盖。你有几个选择：

设置/覆盖背景颜色时的jQuery / CSS优先级

4 个答案: