关于HTML中表的悬停动画

<style>
  table {
    border-collapse: collapse;
  }
  td:hover {
    background-color: #f1f1f1;
  }
</style>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse;
  }
  td {
    transition: background-color 0.3s;
  }
  .hover-effect {
    background-color: #f1f1f1;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('td').hover(function() {
      $(this).addClass('hover-effect');
    }, function() {
      $(this).removeClass('hover-effect');
    });
  });
</script>

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>