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

【问题标题】：jQuery / CSS precedence when setting/overriding background-color设置/覆盖背景颜色时的 jQuery / CSS 优先级
【发布时间】：2012-03-14 04:36:38
【问题描述】：

我正在使用 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>
...

【问题讨论】：

你添加类然后立即删除它？浏览器可能甚至没有时间在已删除之前从正在添加的类中提取更改。
@Marc B：那是CoffeeScript syntax。
嗯，当标题说“jquery”并使用 js-invalid 语法时，我想知道......
@BoltClock。那么-> 是什么意思呢？
我们将不得不看到更多你的代码。您给定的代码本身可以正常工作：jsfiddle.net/BoltClock/h2HYC

标签： javascript jquery css hover coffeescript

【解决方案1】：

这取决于你如何加载 jquery 和代码，但试试这个：

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

【讨论】：

不是我的反对意见，但这通常被认为是一种不好的做法。 important 真的应该只作为最后的手段使用。这通常是糟糕设计的标志。
是的。但是在不知道 css 声明的正确顺序的情况下……这似乎是解决它的最简单方法。无论如何，尽可能避免它

【解决方案2】：

您可以尝试对 CSS 重新排序或添加重要内容，或者您可以执行以下操作：

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

因为元素样式优先。

【讨论】：

【解决方案3】：

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

【讨论】：

我想我很困惑。 回复：#1 不要直接更改 css： 但是，在这种情况下，我不相信我是（尽管 $(this).css('background-color', 'yellow') 有效）。我只是添加一个类标签。

【解决方案4】：

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

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

css specificity

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

【讨论】：

没有变化。边框变为红色，但背景仍为灰色 (#eee)
欣赏特异性链接！