jquery - 滚动可见时，colgroup上的CSS背景颜色

所以我有一个页面，可能包含，也可能不包含一个或多个大型复杂的表。使用jquery，当鼠标悬停在表上时，我将背景色添加到tr和colgroup中。
问题是，当我有多个表时，页面大于视区（滚动条可见），并且不影响第一个表。我真的不知道该如何解释，只需在全屏下运行下面的代码片段，你就会看到。而且，这似乎在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>

怎么回事！？

最佳答案

我使用第n个子（n）选择器进行了变通，从而消除了对col和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");
    };
});