Question

I have a problem. My script works perfectly, but I loose the CSS hover effect if I go back to the input field and delete the data inside it. I no longer see the hover effect.

Before executing the keyup function, the hover effect works correctly, but after executing the keyup function I loose the hovering no longer works IF I delete the data in the input.

Can anyone see a problem or conflict and a possible solution?

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

My CSS:

#r1:hover div.bx, #r1:hover input { background-color: #A9A9A9; cursor:pointer}

Answer 1

Style tag (What javascript uses) always have preference over CSS rules, including :hover; you can obtain the desired effect this way:

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

Or you can do it better with classes

$(document).ready(function(){

   $("#r1 input").keyup(function() { 
   if($("#r1 input").val().length > 0 ) 
     $("#r1 .bx").addClass("ligth");
   else {
     $("#r1 .bx").removeClass("ligth");
}});