Question

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

Answer 1

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

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