javascript - KEYUP 函数执行后 CSS 悬停不起作用

Question

我有一个问题。我的脚本工作完美，但如果我返回输入字段并删除其中的数据，我就会失去 CSS 悬停效果。我不再看到悬停效果。

在执行 keyup 函数之前，悬停效果可以正常工作，但是在执行 keyup 函数之后，我失去了悬停效果，如果我删除了输入中的数据。

任何人都可以看到问题或冲突以及可能的解决方案吗？

$(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;}