All geek questions in one place

JQuery / CSS priority when setting / overriding background color

I am using jQuery for addClass to hover over a div ... but the background color will not change. I guess this is because it was previously assigned a background color in CSS? Other properties (border) in the hover class appear when it hangs, so addClass works.

How can I do this job?

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> ...
+4
source share
4 answers

It depends on how you load jquery and code, but try the following:

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

You can make the second rule more specific:

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

css specification

This assumes that your .hover css actually comes before the .pick1-box rule, since they have the same specificity, the one that occurs later will take precedence.

0
source

You can try reordering or adding importance to your CSS, or you can do something like:

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

as element styles take precedence.

0
source

The problem, as you stated, is that the style has been overridden in the style attribute of the affected element. You have several options:

0
source

Source: https://habr.com/ru/post/1398094/

More articles:


All Articles