背景色のCSSホバーセレクタがjqueryで背景色を動的に変更した後に機能しない

Question

divの背景色をjquery .css()メソッドで動的に変更します。私はまた、背景色を変更する同じdivにCSS hoverセレクタを持たせたい。 jqueryで色を変更する前に、CSS hoverセレクタが機能しますが、divをjqueryメソッドで変更すると、CSS hoverセレクタが機能しなくなったようです。これを回避する方法はありますか（jquery hoverメソッドを使用せずに）？

これは私が話しているかの例です：http://jsfiddle.net/KVmCt/1/

Answer 1

あなたが経験している問題は、CSS情報の場所の重要性である：

外部スタイルシートは、文書の頭の中でCSSによる過支配されます。これは要素のstyle属性でCSSによってオーバーラウンドされます。基本的に、ブラウザーで最後に表示されたスタイルは、以前に指定された競合ルールや他の競合ルールより優先されます（キーワードが!importantでない限り）。

JavaScriptなど

ので、jQueryのは、スタイルを相反するこの常にオーバーライドが他の場所で指定された要素のインラインstyle属性にそのCSS /スタイル情報を配置します。

divの場合はcolor: redが重要で、div:hoverのスタイルは無視されます。

あなたが使用することができ、それを回避するには、次の

div:hover { 
    background-color: blue!important; 
} 

JS Fiddle demoを。

$('div').css('background-color','red').hover(
    function(){ 
     $(this).css('background-color','blue'); 
    }, 
    function(){ 
     $(this).css('background-color','red'); 
    }); 

：あなたはjQueryのhover()メソッドを使用することができ、また

div { 
    background-color: red; 
} 

div:hover { 
    background-color: blue!important; 
} 

：

よりよい解決策は、しかし、CSS jQueryを使ってbackground-color /他のスタイルを割り当てない、と単純に使用することですJS Fiddle demo。

Answer 2

あなたはjQueryを使ってCSSを操作するとき、それは変更するクラスを追加し、削除するためにjqueryのを使用して、スタイルシートの試みで任意のCSSをインラインで追加し、上書きしますホバーオンカラー。ここでは、作業フィドルです：http://jsfiddle.net/KVmCt/6/

jQueryのは、次のようになります。

$("div").hover(
function(){ 
$(this).addClass("blue"); 
} 
, 
function(){ 
$(this).removeClass("blue"); 
}); 

Answer 3

jqueryのcss方法は、それを実行した後、あなたのdivは

<div style="background-color: red">Hello world</div>` 

のように見えることを意味し、あなたの要素にインラインスタイルを追加します

インライン・スタイリングは、CSSスタイルより常に優先順位が高くなります。

インラインスタイルを使用する代わりにCSSクラスを追加してみませんか？以下で試してみてください。

$("div").addClass("edited"); 

と

div:hover, div.edited:hover { 
    background-color: blue; 
} 

div.edited { 
    background-color: red; 
} 

、あなたはそれが動作表示されます。

Answer 4

簡単な方法は、CSSに重要なタグを追加することです。

div:hover { 
    background-color: blue !important; 
}; 

Answer 5

あなたはちょうどあなたが

$("#yourselector").attr("style", " "); 

を使用することができますインラインスタイルを削除する必要がある場合にはstyle=" "