My webpage contains one or more large and complex tables, where I use JQuery to add background-color to tr and colgroup elements when hovering over the table(s).
An issue arises when there are multiple tables on a page that extends beyond the viewport with a visible scrollbar. The problem is that the first table does not get affected by the hover effect. To experience this firsthand, run the code snippet below in fullscreen mode. Interestingly, this behavior does not occur in Internet Explorer.
$("table").delegate('td','mouseover mouseleave', function(e) {
var $table = $(this).closest('table');
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$table.children("colgroup").children("col").eq($(this).index()).addClass("hover");
} else {
$(this).parent().removeClass("hover");
$table.children("colgroup").children("col").eq($(this).index()).removeClass("hover");
};
});.hover {
background-color: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="margin: 60px;" cellpadding="10" cellspacing="0">
(decided to showcase only content within one of the tables)
What could be causing this strange behavior?