KEYUP機能の実行後にCSSホバーが機能しない

Question

問題があります。私のスクリプトは完璧に動作しますが、入力フィールドに戻り、その中のデータを削除すると、CSSのホバー効果が失われます。私はもはやホバー効果を見ない。

ホバリングエフェクトは正しく動作しますが、キーアップ機能を実行するとホバリングが無効になりますのデータを削除しても機能しません。

問題や矛盾と解決方法は誰にも見えますか？

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF"); 
    else {if($("#r1 input").val().length == 0) 
    $("#r1 .bx").css("background-color", "#E8E8E8").css("color", "#000"); }}); 
}); 

マイCSS：

#r1:hover div.bx, #r1:hover input { background-color: #A9A9A9; cursor:pointer} 

Answer 1

スタイルタグ（JavaScriptの用途は何ですか）常に含め、CSSルールの上に好みを持っている：ホバー。

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").css("background-color", "#2F2F2F").css("color", "#FFF"); 
    else { 
    $("#r1 .bx").removeAttr("style"); }}); 
}); 

またはあなたの要素のスタイルを変更するには、インラインスタイルを使用します。あなたは、クラス

$(document).ready(function(){ 

    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
    $("#r1 .bx").addClass("ligth"); 
    else { 
    $("#r1 .bx").removeClass("ligth"); 
}}); 

Answer 2

.css()とのより良いそれを行うことができます：あなたは、この方法で所望の効果を得ることができます。これにより、:hoverのような擬似クラスが防止されます。

クラスを定義し、代わりに（JSFiddle）を.addClass()と.removeClass()を使用します。

$(document).ready(function(){ 
    $("#r1 input").keyup(function() { 
    if($("#r1 input").val().length > 0) 
      $("#r1 .bx").removeClass('b').addClass('f'); 
    else {if($("#r1 input").val().length == 0) 
     $("#r1 .bx").removeClass('f').addClass('b');; }}); 
}); 

#r1:hover div.bx, #r1:hover input { 
    background-color: #A9A9A9; cursor:pointer; 
} 

.f {background-color:#2f2f2f;color:#fff;} 
.b {background-color:#e8e8e8;color:#000;} 

Answer 3

あなたのCSSクラスは、要素自体のスタイル情報の存在によってオーバーライドされることができます。

むしろ直接あなたからkeyupで色を指定するよりも、CSSクラスを追加または削除：

.hasData {color:#FFF;} 

次を使用して：私はから「これ」を使用してい

$(document).ready(function(){ 
    $("#r1 input").keyup(function(ev) { 
     $("#r1 .bx").toggleClass('hasData', !!$(this).val()); 
    }); 
}); 

注意イベントハンドラを使用して、入力要素のドキュメント全体を再度検索するのではなく、.toggleClass()の第2の署名を使用して値をブール値に強制した後にトグルすることができます（空でない場合はtrue）。