执行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）。