執行KEYUP功能後CSS懸停不起作用

我遇到問題。我的腳本完美地工作，但是如果我回到輸入字段並刪除其中的數據，我會放棄CSS懸停效果。我不再看到懸停效果。執行KEYUP功能後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}

來源

2012-04-11 Erik

你在哪裏下載？你的函數也可以使用id =「r1」，而你的css是id =「r2」 – Elen 2012-04-11 17:02:00

感謝你的幫助。我們可以聊天嗎？ – Erik 2012-04-11 17:03:56

澤塔有你的情況的答案。如果這還不夠 - 請看on（）函數，它會監聽現場修正 – Elen 2012-04-11 17:07:30

Style標籤（什麼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"); 
}});

來源

2012-04-11 17:05:27

您的解決方案可以工作，但removeAttr或removeClass會刪除太多。我鬆散的一切，寬度，高度等... – Erik 2012-04-11 17:09:17

是否有可能reinste css屬性後removeAttr？ – Erik 2012-04-11 17:17:47

@Erik避免使用CSS類的樣式屬性。那麼你不會有這樣的問題。 – 2012-04-11 22:18:10

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

來源

2012-04-11 17:05:51 Zeta

你的CSS類可以通過樣式信息元素本身的存在而被覆蓋。

，而不是你的KEYUP直接指定顏色，添加或刪除CSS類：使用以下

.hasData {color:#FFF;}

：

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

請注意，我使用了「這個」從事件處理程序，而不是再次在輸入元素中搜索整個文檔，並且在將值強制爲布爾值（因此，如果非空則爲真）之後使用第二個簽名.toggleClass()完成切換。

來源

2012-04-11 17:07:27

執行KEYUP功能後CSS懸停不起作用

回答

相關問題