I've set up an HTML table with a hover highlight feature using jQuery and CSS. Here's how my hover event is structured:
$('#' + element.id + ' tr:not(:first,[class="summary_row"])').die('mouseover mouseout').live('mouseover mouseout', function (event) {
if (event.type == 'mouseover') {
// code for mouseover
$(this).addClass("table_row_hover");
} else {
// code for mouseout
$(this).removeClass("table_row_hover");
}
});
Basically, I'm toggling a CSS class on and off for the table row when the mouse hovers over and leaves it. The CSS class (table_row_hover) defines background and text colors:
.table_row_hover
{
background-color: #660033;
color: #FFFFFF;
}
However, I'm facing an issue in Internet Explorer where, under the table, there's a pager div for pagination that shifts down whenever I hover over the table rows. This shifting increases with each hover, especially when the table has a visible horizontal scroll bar. The table div has attributes like overflow: auto; overflow-y: hidden; -ms-overflow-y: hidden;
Do you have any solutions or ideas for this problem?
Thanks!