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

Question

所以我有一个页面可能包含也可能不包含一个或多个大而复杂的表格。使用 JQuery，我将鼠标悬停在表格上时向 tr 和 colgroup 添加背景颜色。

问题是当我有多个表格时，页面大于视口(viewport)(滚动条可见)，并且它不会影响第一个表格。我真的不知道如何解释它，只需全屏运行下面的代码片段，您就会看到。此外，这似乎不会发生在 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>

这是怎么回事!？

Answer 1

我用 nth-child(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");
    };
});