jquery - 悬停动画到 HTML 表格

Question

悬停时我想在桌面上显示动画

<table border="1">
<tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
</tr>
<tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
 </tr>
 <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
</tr>
</table>

enter image description here 我添加了我真正想要的图像

Answer 1

可以考虑使用伪元素实现这样的效果:

table {
 position:relative;
 z-index:0;
 overflow:hidden;
}
td {
  position:relative;
}
td:hover::before,
td:hover::after{
  content:"";
  position:absolute;
  z-index:-1;
  background:yellow;
}
td:hover::before{
  top:0;
  bottom:0;
  right:-50vw;
  left:-50vw;
}
td:hover::after {
  left:0;
  right:0;
  top:-50vh;
  bottom:-50vh;
}

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>