首页 文章

试图让表格行悬停背景颜色与斑马条纹行一起工作

提问于
浏览 次
1

我愿意为IE8做最好的方法

我想为我的 table 交替行颜色（ #fff ， #efefef ）并且还有一个悬停效果，所以背景变为 #D2DEE8 . 我想在CSS中使用 :hover 和 :nth-child(odd) ，但我发现这些方法不适用于IE8 .

我正在使用jQuery进行悬停，但是当我悬停然后离开那一行时，它会消除交替的颜色（目前我正在使用nth-child（奇数）创建） .

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

如果任何人都可以帮我解决这个问题，或者提供一种更容易/更好的方法，IE8的悬停或交替排，我会很感激！谢谢！

jquery css hover alternating

4 回答

  • 1

    对于不同的行颜色，请使用:odd和:even . 使用:hover作为悬停效果 . 与IE8的Testet .

    JavaScript的：

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

    CSS：

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

    另见example .

    回复于
  • 0

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

    better 方法将使用类名：

    CSS：

    .special-color {
    background: #D2DEE8;
}

    JavaScript的：

    $(".DefaultTable tr").not(".DefaultTable .nohover").hover(
    function () {
        $(this).addClass('special-color');
    },
    function () {
        $(this).removeClass('special-color');
    }
);
    回复于
  • 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");
 });

}
    回复于
  • 1

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

    .DefaultTable tr td {background-color:transparent}

    并像scessor的例子那样做

    回复于

相关问题