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'，而不是再次搜索整个文档以获取输入元素，并且在将值强制转换为.toggleClass()之后切换为{{3}}。 boolean（所以，如果非空则为true）。

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

3 个答案: