Jquery 正在尝试使表格行悬浮背景色用于斑马条纹行

我愿意为IE8做最好的方法+

我希望我的表格有交替的行颜色（

#fff

，

#efefef

），并且还有悬停效果，因此背景变为

#D2DEE8

。我很想在CSS中使用

：hover

和

：nth child（odd）

，但我发现这些方法不适用于IE8

我使用jQuery进行悬停，但它消除了在我悬停然后离开该行时交替使用的颜色（目前我使用第n个子项（奇数）来创建）

    $(".DefaultTable tr").not(".DefaultTable .nohover").hover(
        function () {
            var color = $(this).css('background')
            $(this).css('background', '#D2DEE8');
        },
        function () {
            $(this).css('background', color);
        }
    );

---

如果有人能帮我解决这个问题，或者为IE8提供一种更简单/更好的方法，悬停或交替行，我将不胜感激！谢谢

您必须将

颜色

声明移动到公共范围：

var color; //At this point, the `color` variable can be read by both functions
$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        color = $(this).css('background')
        $(this).css('background', '#D2DEE8');
    },
    function () {
        $(this).css('background', color);
    }
);

更好的方法是使用类名：

CSS:

JavaScript:

$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);

---

您必须将

颜色

声明移动到公共范围：

var color; //At this point, the `color` variable can be read by both functions
$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        color = $(this).css('background')
        $(this).css('background', '#D2DEE8');
    },
    function () {
        $(this).css('background', color);
    }
);

更好的方法是使用类名：

CSS:

JavaScript:

$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);

对不同的行颜色使用和。用于悬停效果。用IE8测试

javascript:

$(".DefaultTable tr:odd").css('background-color', '#EFEFEF');
$(".DefaultTable tr:even").css('background-color', '#FFFFFF');

css:

另请参见此图。

对于不同的行颜色，请使用和。用于悬停效果。用IE8测试

javascript:

$(".DefaultTable tr:odd").css('background-color', '#EFEFEF');
$(".DefaultTable tr:even").css('background-color', '#FFFFFF');

css:

---

也可以看到这一点。

当我尝试做类似的事情时，我发现

td

在IE中没有透明的背景

.DefaultTable tr td{背景色：透明}

---

像scessor的例子那样做

当我尝试做类似的事情时，我发现

td

在IE中没有透明的背景

.DefaultTable tr td{背景色：透明}

---

就像scessor的例子一样，我对斑马色和鼠标悬停以及行选择使用以下代码，即使这些代码也适用于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");
 });

}

---

我对斑马色和鼠标悬停以及行选择使用以下代码，即使这些代码也适用于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");
 });

}

---

twitter引导程序中有代码用于执行此操作twitter引导程序中有代码用于执行此操作这在IE中对我来说似乎不起作用。。。虽然它在Chrometh中运行良好，但在IE中对我来说似乎不起作用。。。尽管它在Chrome中运行良好，但您还是希望使用.addClass，因为我在IE8

中知道！重要信息

不会覆盖元素样式。这里更新了fiddle：我已经用IE8测试了我的示例，没有问题。

没有问题！重要提示

（另请参见此）和：使用IE8悬停（请参见此）。这非常有效。我只需要弄清楚为什么悬停在我的页面上不起作用，而是在JSFIDLE上。谢谢！：）我知道它是什么，但它不会覆盖元素样式。你会想使用.addClass，因为我在IE8

中知道！重要信息

不会覆盖元素样式。这里更新了fiddle：我已经用IE8测试了我的示例，没有问题。

没有问题！重要提示

（另请参见此）和：使用IE8悬停（请参见此）。这非常有效。我只需要弄清楚为什么悬停在我的页面上不起作用，而是在JSFIDLE上。谢谢！：）我知道它是什么，但它不会覆盖元素样式。