0

私は問題があります。私のスクリプトは完全に機能しますが、入力フィールドに戻ってその中のデータを削除すると、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}
4

3 に答える 3

0

要素自体にスタイル情報が存在することにより、CSS クラスがオーバーライドされている可能性があります。

キーアップで色を直接指定するのではなく、CSS クラスを追加または削除します。

.hasData {color:#FFF;}

以下を使用します。

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

ドキュメント全体で入力要素を再度検索するのではなく、イベント ハンドラーから「this」を使用していること、および値をブール値に強制した後、 .toggleClass()の 2 番目のシグネチャでトグルが行われることに注意してください (つまり、空でない場合は true )。

于 2012-04-11T17:07:27.423 に答える