如何在不使用 useState 的情况下在 <tr> 悬停时显示/隐藏 <td> 的背景图像

我想要发生的是在第一个中显示/隐藏背景图像，<td>同时将鼠标悬停在整个表格行上而不添加任何状态。我想我可以只使用一些 css 选择器并使用:hover的<tr/>来处理它。虽然不知道从这里去哪里。

我期望的行为：

• <td>当用户未将鼠标悬停在 a 上时，在 a 中显示背景图像<tr>
• 在整个悬停时隐藏背景图像 <tr>

这是我希望它看起来像的 gif

到目前为止我所尝试的是在 td 中添加一个 div 并添加一个背景图像。但是，我不确定如何触发<tr/>td 的悬停，然后更改 td 的样式以添加visibility: hidden;到<td/>

这是我迄今为止尝试过的简单代码和框链接

从沙箱粘贴代码

export default function App() {
  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>Header</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <StyledTD>
              <TableDataBackground />
              checkbox placholder
            </StyledTD>
            <td> Some person </td>
            <td> this is their data</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

const StyledTD = styled.td`
  position: relative;
`;

const TableDataBackground = styled.div`
  position: absolute;
  top: 0;
  height: 30px;
  width: 30px;
  background-image: url("http://assets.stickpng.com/images/58afdad6829958a978a4a693.png");
  background-size: 30px;
  background-repeat: no-repeat;
`;