执行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悬停不起作用

回答

相关问题