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; }

with:

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

像这样的调用的问题

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

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

Answer 2

<style type="text/css">
  .resultsdiv.odd { background-color: #fff }
  .resultsdiv.even { background-color: #EFF1F1 }
  .resultsdiv.highlight { background-color: #f4f2f2 }
</style>

<script type="text/javascript">
$(function(){
    $(".resultsdiv:odd").addClass('odd');
    $(".resultsdiv:even").addClass('even');
    $('.resultsdiv').hover(function() {
          $(this).addClass('highlight');
       },
       function() {
          $(this).removeClass('highlight');
    });
});
</script>

Answer 3

我使用以下代码。该表是使用ajax 获取的。 ajax成功后，我触发tableready()函数。在其中我有以下代码，它与带有 zebra 小部件的表格排序器完美配合。

 $("#ResultsDisplay").tablesorter({ widgets: ["zebra"] });
    $("#ResultsDisplay").trigger("update");
    $(".tablesorter tr").mouseover(function(){ $(this).addClass("over");});
    $(".tablesorter tr").mouseout(function () { $(this).removeClass("over"); });

    $('.tablesorter tr').click(function () {
        if ($(this).hasClass('colorMe')){
            $(this).removeClass('colorMe');
        }
        else {
            $(this).closest('table').find('tr').removeClass('colorMe');
            $(this).addClass('colorMe');
        }
    });

Answer 4

我使用此代码来显示替代颜色、鼠标悬停和所选行颜色突出显示。它会起作用
如果您通过 ajax 生成表行，那么只需调用此脚本即可工作。

function rowHighlight(){            
    $(function(){
    $("#facCodes tr:odd").addClass('oddRow');
    $("#facCodes tr:even").addClass('evenEven');
    $('#facCodes tr').hover(function() {
          $(this).addClass('hover');
       },
       function() {
          $(this).removeClass('hover');
    });

});
 $('#facCodes tr').click(function(event){
    $(this).addClass("click").siblings().removeClass("click");
 });

}

Answer 5

当鼠标移开时，将行的颜色设置为#fff，这对于奇数行看起来不错，但对于偶数行则不然。

鼠标移出时，您需要检查它是奇数还是偶数，并相应地设置颜色。