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

Posted 2023-03-03

【中文标题】设置/覆盖背景颜色时的 jQuery / CSS 优先级

【英文标题】：jQuery / CSS precedence when setting/overriding background-color

【发布时间】：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   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

【参考方案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】：

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

Don't change the element's css directly. Use !important on the settings you absolutely need to override element styles. Change the element's css directly, but remove them once you're done with them.

【讨论】：

我想我很困惑。 回复：#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)

欣赏特异性链接！