试图让表格行悬停背景颜色与斑马条纹行一起使用答案

【问题标题】：Trying to get table row hovering background color to work with zebra striping rows试图让表格行悬停背景颜色与斑马条纹行一起使用
【发布时间】：2011-12-30 18:45:45
【问题描述】：

我愿意为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 的悬停或交替行，我将不胜感激！谢谢！

【问题讨论】：

twitter bootstrap 中有代码用于执行此操作twitter.github.com/bootstrap/#tables

标签： jquery css hover alternating

【解决方案1】：

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

另见example。

【讨论】：

你会想要使用 .addClass 因为我知道在 IE8 !important 不会覆盖元素样式。在这里更新小提琴：jsfiddle.net/H8ukq/2
我已经用 IE8 测试了我的示例，没有任何问题。
在 IE8 上使用!important（另请参阅此link）和:hover（请参阅此link）没有问题。
这很好用。我只需要弄清楚为什么悬停在我的页面上不起作用而是在 jsfiddle 上。谢谢！ :)
我知道它是什么，但它不会覆盖元素样式。

【解决方案2】：

您必须将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');
    }
);

【讨论】：

这对我来说似乎在 IE 中不起作用......虽然它在 Chrome 中运行良好

【解决方案3】：

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

}

【讨论】：

【解决方案4】：

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

.DefaultTable tr td {background-color:transparent}

像scessor的例子那样做

【讨论】：