CSS kolor tła na grupie, gdy widoczny jest scroll

Question

Mam więc stronę, która może zawierać lub nie zawierać dużych i złożonych tabel. W JQuery dodam kolor tła do tr i colgroup po najechaniu kursorem na tabelę (y).

Problem występuje, gdy mam więcej niż jedną tabelę, strona jest większa niż rzutnia (pasek przewijania jest widoczny) i NIE wpływa na pierwszą tabelę. Naprawdę nie wiem, jak to wyjaśnić, po prostu uruchom poniższy fragment na pełnym ekranie, a zobaczysz. Nie wydaje się to również w IE.

$("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>

Co się dzieje !?

Answer 1

Zrobiłem obejście z selektorem n-dzieci (n), eliminując w ten sposób potrzebę col i 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"); 
    }; 
});