執行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

.css()將使用內聯樣式來更改元素的樣式。 這將阻止偽類，如:hover 。

定義類並使用.addClass()和.removeClass()代替（ JSFiddle ）：

$(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 2

樣式標簽（javascript使用的）始終優先於CSS規則，包括：hover; 你可以通過這種方式獲得所需的效果：

$(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 3

您可以通過元素本身的樣式信息來覆蓋您的CSS類。

不是直接在keyup中指定顏色，而是添加或刪除CSS類：

.hasData {color:#FFF;}

使用以下內容：

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

請注意，我使用事件處理程序中的'this'而不是再次搜索整個文檔的輸入元素，並且在將值強制轉換為boolean之后，使用.toggleClass（）的第二個簽名完成切換（所以，如果非空，則為true）。