Question

I use the following jquery statements,

$(".resultsdiv:odd").css("background-color", "#fff");
$(".resultsdiv:even").css("background-color", "#EFF1F1");
$('.resultsdiv').hover(function() {
      $(this).css('background-color', '#f4f2f2');
   },
   function() {
      $(this).css('background-color', '#fff');
});

Alternate seems to be ok initially but after hover over a div element it doesn’t work … Any suggestion…

Answer 1

My suggestion is don’t manipulate style directly, use classes. So CSS:

.resultsdiv { background-color: #FFF; }
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; }

with:

$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
  $(this).addClass("resultshover");
}, function() {
  $(this).removeClass("resultshover");
});

The problem with a call like:

$(this).css("background", "#FFF");

is that you have no way of knowing how to reset the element to its original state because its original colour may have also been set as inline style, as is the case in your code sample. Classes just make this kind of problem much much easier.