jQueryの/ CSSの優先順位/オーバーライド背景色に

Question

を設定するとき、私はdiv上でホバリングにaddClassにはjQueryを使用しています...しかし、背景色は変更されません。以前は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> 
... 

Answer 1

それはあなたがjQueryとコードをロードしているかによって異なりますが、この試してみてください。

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

を

Answer 2

あなたは第二のルールは、より具体的にすることができます：

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

css specificity

これはあなたの.hover CSSが実際にこれらのような従来.pick1-boxルールに発生することを前提として同等の特異性を有し、後に発生するものがあります優先順位。

Answer 3

あなたは、並べ替えをしようとしたり、CSSへの重要なを追加するか、のような何かができることができます：要素のスタイルが優先

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

以来。スタイルが影響を受け要素のstyle属性で上書きされていますので、あなたが述べてきたように

Answer 4

問題は、あります。あなたは、オプションのカップルを持っている：

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