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");

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

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获取该表。 ajaxing成功后，我触发tableready（）函数。在里面我有以下代码，它与使用zebra widget的表分类器完美配合。

 $("#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，这对于奇数行看起来很好，但不是偶数。

在mouseout上你需要检查它是奇数还是偶数并相应地设置颜色。

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

5 个答案: