当光标位于两个单元格之间时，表格上的CSS悬停效果不会应用tbody和tr悬停效果

<table id="myTable">
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
    <tr>
      <td>单元格3</td>
      <td>单元格4</td>
    </tr>
  </tbody>
</table>

.hover {
  background-color: yellow;
}

var table = document.getElementById("myTable");
var cells = table.getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("mouseover", function() {
    this.parentNode.classList.add("hover");
  });

  cells[i].addEventListener("mouseout", function() {
    this.parentNode.classList.remove("hover");
  });
}