当前位置：文江博客话题详情

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

发布于 2025-01-08 12:33:18 字数 929 浏览 1 评论 0 原文

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

原文

I'm using jQuery to addClass to a hovered over div...but the background color won't change. I'm guessing it's because it has previously been assigned a background-color in CSS? Other properties (border) on the hover class appear when hovering so addClass is working.

How can/should I make this work?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┾廆蒐ゝ 2025-01-15 12:33:18

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

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

It depends how you're loading jquery and code but try this:

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

回复收藏 0 原文

固执像三岁 2025-01-15 12:33:18

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

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

因为元素样式优先。

You can try re-ordering or adding an important to your CSS, or you could do something like:

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

since element styles take precedence.

回复收藏 0 原文

鹿! 2025-01-15 12:33:18

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

回复收藏 0 原文

五里雾 2025-01-15 12:33:18

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

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

css特异性

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

You could make the 2nd rule more specific:

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

css specificity

This assumes that your .hover css actually occurs prior to the .pick1-box rule as these have equal specificity, the one which occurs later will have precedence.