1

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

我想要为我的表格交替行颜色（#fff, #efefef），并且还具有悬停效果，因此背景变为#D2DEE8. 我很想在 CSS 中使用:hover和:nth-child(odd)，但我发现这些方法不适用于 IE8。

我使用 jQuery 进行悬停，但每当我悬停然后离开该行时，它就会消除交替颜色（目前我正在使用 nth-child(odd) 创建）。

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

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

4

4 回答 4

3

使用:odd和:even用于不同的行颜色。使用:hover实现悬停效果。用 IE8 测试。

javascript:

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

CSS：

.DefaultTable tr:hover {
    background-color: #D2DEE8 !important;
}

另请参阅此示例。

于 2011-12-30T19:01:13.483 回答
1

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

}
于 2014-01-07T11:34:39.060 回答
1

您必须将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：

.special-color {
    background: #D2DEE8;
}

JavaScript：

$(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);
于 2011-12-30T18:51:00.003 回答
0

当我尝试做类似的事情时，我发现tdIE 中没有透明背景。

.DefaultTable tr td {background-color:transparent}

并像 scessor 的例子那样做

于 2011-12-30T19:05:55.650 回答