Trying to get table row hovering background color to work with zebra striping rows

Question

I'm willing to do the best method for IE8+

I'm wanting alternating row colors (#fff, #efefef) for my table and also have a hovering effect so the background changes to #D2DEE8. I would love to just use :hover and :nth-child(odd) in CSS but I've found these methods dont work with IE8.

I was using jQuery for the hovering but it eliminates the alternating colors (which at the moment I'm using nth-child(odd) to create) whenever I hover and then leave that row.

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

If anyone can help me figure this out OR provide a easier/better way of doing either, the hovering or alternating rows for IE8, I would appreciate it! Thanks!

Answer 1

Use :odd and :even for different row colors. Use :hover for the hover effect. Testet with IE8.

javascript:

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

css:

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

Also see this example.