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>
...

- Meltemi

---

你添加了一个类，然后立即将其删除？浏览器可能甚至没有时间在添加类后绘制更改，就已经被删除了。 - Marc B

啊，好吧，当标题说“jquery”并使用无效的JS语法时，不得不想... - Marc B

@BoltClock。那么 -> 是什么意思？ - gdoron

我们需要看更多你的代码。你提供的代码本身可以正常工作：http://jsfiddle.net/BoltClock/h2HYC - BoltClock

@BoltClock：我尝试了伪类，但它也没有起作用。不确定为什么...只能假设是因为我通过jQuery将click事件附加到了div上。虽然并不完全确定。显然JavaScript不是我的强项。 - Meltemi

Answer 1

这取决于你如何加载jquery和代码，但是可以尝试这样做：

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

- jribeiro

---

不是我给你点的踩，但这通常被认为是一种不好的做法。important 应该只在万不得已的情况下使用。这往往是设计不良的标志。 - James Montagne

是的，但是如果不知道CSS声明的正确顺序...似乎这是解决它最简单的方法。无论如何，请尽量避免使用它。 - jribeiro

Answer 2

你可以让第二条规则更具体：

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

CSS 特异性

这假设你的 .hover CSS 实际上出现在 .pick1-box 规则之前，因为它们具有相等的特异性，后出现的那个将具有优先权。

- James Montagne

---

边框变成红色，但背景仍然是灰色（#eee）。 - Meltemi

感谢您提供具体的链接！ - Meltemi

Answer 3

你可以尝试重新排序或添加一个重要的CSS，或者你可以做类似于以下的事情：

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

因为元素样式具有优先权。

- Bradley Mountford

Answer 4

问题如你所述，是因为受影响元素的样式已在其样式属性中被覆盖。你有几个选项：

1. 不要直接更改元素的CSS。
2. 对于必须覆盖元素样式的设置，请使用!important。
3. 直接更改元素的CSS，但完成后将其删除。

- cwharris

---

我想我有点困惑。关于＃1不要直接更改CSS：但是，在这种情况下，我不认为我是这样做的（尽管$（this）.css（'background-color'，'yellow'）有效）。我只是添加了一个类标签。 - Meltemi