CSS background-color auf colgroup wenn scroll ist sichtbar

Question

So habe ich eine Seite, die eine oder mehrere große und komplexe Tabelle (n) enthalten kann oder nicht. Mit JQuery füge ich Hintergrundfarbe zu tr und colgroup hinzu, wenn ich den Mauszeiger über die Tabelle (n) halte.

Das Problem ist, wenn ich mehr als eine Tabelle habe, ist die Seite größer als das Ansichtsfenster (Bildlaufleiste ist sichtbar), und es betrifft nicht die erste Tabelle. Ich weiß wirklich nicht, wie ich das erklären soll, mach einfach den folgenden Ausschnitt im Vollbildmodus und du wirst sehen. Dies passiert auch nicht in IE, wie es scheint.

$("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"> 
 
    <colgroup> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    </colgroup> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     <th>col4</th> 
 
     <th>col5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1a</td> 
 
     <td>2a</td> 
 
     <td>3a</td> 
 
     <td>4a</td> 
 
     <td>5a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1b</td> 
 
     <td>2b</td> 
 
     <td>3b</td> 
 
     <td>4b</td> 
 
     <td>5b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1c</td> 
 
     <td>2c</td> 
 
     <td>3c</td> 
 
     <td>4c</td> 
 
     <td>5c</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1d</td> 
 
     <td>2d</td> 
 
     <td>3d</td> 
 
     <td>4d</td> 
 
     <td>5d</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1e</td> 
 
     <td>2e</td> 
 
     <td>3e</td> 
 
     <td>4e</td> 
 
     <td>5e</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1f</td> 
 
     <td>2f</td> 
 
     <td>3f</td> 
 
     <td>4f</td> 
 
     <td>5f</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1g</td> 
 
     <td>2g</td> 
 
     <td>3g</td> 
 
     <td>4g</td> 
 
     <td>5g</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1h</td> 
 
     <td>2h</td> 
 
     <td>3h</td> 
 
     <td>4h</td> 
 
     <td>5h</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1i</td> 
 
     <td>2i</td> 
 
     <td>3i</td> 
 
     <td>4i</td> 
 
     <td>5i</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1j</td> 
 
     <td>2j</td> 
 
     <td>3j</td> 
 
     <td>4j</td> 
 
     <td>5j</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1k</td> 
 
     <td>2k</td> 
 
     <td>3k</td> 
 
     <td>4k</td> 
 
     <td>5k</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1l</td> 
 
     <td>2l</td> 
 
     <td>3l</td> 
 
     <td>4l</td> 
 
     <td>5l</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table style="margin: 60px;" cellpadding="10" cellspacing="0"> 
 
    <colgroup> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    <col></col> 
 
    </colgroup> 
 
    <thead> 
 
    <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     <th>col3</th> 
 
     <th>col4</th> 
 
     <th>col5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1a</td> 
 
     <td>2a</td> 
 
     <td>3a</td> 
 
     <td>4a</td> 
 
     <td>5a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1b</td> 
 
     <td>2b</td> 
 
     <td>3b</td> 
 
     <td>4b</td> 
 
     <td>5b</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1c</td> 
 
     <td>2c</td> 
 
     <td>3c</td> 
 
     <td>4c</td> 
 
     <td>5c</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1d</td> 
 
     <td>2d</td> 
 
     <td>3d</td> 
 
     <td>4d</td> 
 
     <td>5d</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1e</td> 
 
     <td>2e</td> 
 
     <td>3e</td> 
 
     <td>4e</td> 
 
     <td>5e</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1f</td> 
 
     <td>2f</td> 
 
     <td>3f</td> 
 
     <td>4f</td> 
 
     <td>5f</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1g</td> 
 
     <td>2g</td> 
 
     <td>3g</td> 
 
     <td>4g</td> 
 
     <td>5g</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1h</td> 
 
     <td>2h</td> 
 
     <td>3h</td> 
 
     <td>4h</td> 
 
     <td>5h</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1i</td> 
 
     <td>2i</td> 
 
     <td>3i</td> 
 
     <td>4i</td> 
 
     <td>5i</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1j</td> 
 
     <td>2j</td> 
 
     <td>3j</td> 
 
     <td>4j</td> 
 
     <td>5j</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1k</td> 
 
     <td>2k</td> 
 
     <td>3k</td> 
 
     <td>4k</td> 
 
     <td>5k</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1l</td> 
 
     <td>2l</td> 
 
     <td>3l</td> 
 
     <td>4l</td> 
 
     <td>5l</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Was geht !?

Answer 1

Ich habe einen Workaround mit der nth-Kind (n) Selektor gemacht, so dass die Notwendigkeit für col und colgroup.

$("table").delegate('td','mouseover mouseleave', function(e) { 
    if (e.type == 'mouseover') { 
     $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").addClass("hover"); 
     $(this).parent().addClass("hover"); 
    } else { 
     $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").removeClass("hover"); 
     $(this).parent().removeClass("hover"); 
    }; 
});