web-dev-qa-db-ja.com

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

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

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

jquerycsshover
23
Justin Meltzer

発生している問題は、CSS情報の場所の重要性です。

外部のスタイルシートは、ドキュメントの先頭でCSSによって上書きされます。これは、要素のstyle属性でCSSによって上書きされます。基本的に、ブラウザーで最後に検出されたスタイルは、以前に指定された、またはそれ以外の場合に競合するルールをオーバーライドします（_!important_のキーワードが使用されている場合を除く）。

JavaScript、したがってjQueryとして、CSS /スタイリング情報を要素のインラインstyle属性に配置しますthisalwaysは競合をオーバーライドします他の場所で指定されたスタイル。

_color: red_スタイルを無視して、divの_div:hover_をより重視します。

それを回避するために、あなたは使うことができます：

_div:hover {
    background-color: blue!important;
}
_

JS Fiddleデモ 。

ただし、より良い解決策は、jQueryで_background-color_/otherスタイルを割り当てないようにし、CSSを使用することです。

_div {
    background-color: red;
}

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

または、jQueryのhover()メソッドを使用することもできます。

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

JS Fiddleデモ 。

46
David says reinstate Monica

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;
}

それが機能することがわかります。

7
StefanoP

JQueryでcssを操作すると、インラインで追加され、スタイルシート内のcssがオーバーライドされます。jqueryを使用して、ホバー時の色を変更するクラスを追加および削除してみてください。これが実際のフィドルです： http://jsfiddle.net/KVmCt/6/

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

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

あなたが使用できるインラインスタイルを削除する必要がある場合

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

インラインスタイルをstyle=" "に置き換えます

2
Tristan

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

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