Jquery 交替行颜色在悬停功能后似乎不起作用

Question

我使用以下 jquery 语句，

$(".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 最初似乎没问题，但将鼠标悬停在 div 元素上后不起作用...任何建议...

Answer 1

我的建议是不要直接操作样式，使用类。所以CSS:

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

与:

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

调用的问题如下:

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

的问题是您无法知道如何将元素重置为其原始状态，因为它的原始颜色也可能已设置为内联样式，就像代码示例中的情况一样。类只是让这类问题变得更加容易。