悬停功能后Jquery备用行颜色似乎不起作用答案

【问题标题】：Jquery alternate row color doesn't seem to work after hover function悬停功能后Jquery备用行颜色似乎不起作用
【发布时间】：2011-01-30 17:31:26
【问题描述】：

我使用以下 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 元素上后它不起作用...任何建议...

【问题讨论】：

标签： jquery colors hover row

【解决方案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");

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

【讨论】：

@Cletus 如何将类名添加到这些
$('#element').addClass('ClassName');
+1，设置背景色直接导致我的:hover失效了。
请注意，如果您已定义 .resultshover CSS 类 before .resultseven CSS 类...，那么悬停效果将无法在偶数行上起作用。至少这是我在 IE 8 中的经验。所以定义 CSS 类的顺序很重要。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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");
 });

}

【讨论】：

【解决方案5】：

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

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

【讨论】：