title: How to show/hide a background image of a <td> on hover of a <tr> without using useState
body: <p>What I want to happen is to show/hide a background-image inside the first <code>&lt;td&gt;</code> while hovering over the whole table row without adding any states. I think I can just use some css selectors and use the <code>:hover</code> of the <code>&lt;tr/&gt;</code> to handle it. Not sure where to go from here though.</p>
  <p>The behavior I expect:</p>
  <ul>
  <li>show a background-image in a <code>&lt;td&gt;</code> when a user is not hovering over a <code>&lt;tr&gt;</code></li>
  <li>hide the background-image on hover of the whole <code>&lt;tr&gt;</code></li>
  </ul>
  <p><a href="https://gph.is/g/aR8wkNO" rel="nofollow noreferrer">Here's a gif of what I expect it to look like</a></p>
  <p>What I've tried so far is to add a div inside the td and add a background image. However, I am unsure of how I can trigger a hover for the <code>&lt;tr/&gt;</code> and then change the td's style to add <code>visibility: hidden;</code> on the div inside the <code>&lt;td/&gt;</code></p>
  <p><a href="https://codesandbox.io/s/sharp-sid-zpde6?file=/src/App.js" rel="nofollow noreferrer">Here's a simple codesandbox link of what I've tried so far</a></p>
  <p>Pasting the code from the sandbox</p>
  <pre><code>export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Header&lt;/th&gt;
              &lt;th&gt;Header 2&lt;/th&gt;
              &lt;th&gt;Header 3&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;StyledTD&gt;
                &lt;TableDataBackground /&gt;
                checkbox placholder
              &lt;/StyledTD&gt;
              &lt;td&gt; Some person &lt;/td&gt;
              &lt;td&gt; this is their data&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  
  const StyledTD = styled.td`
    position: relative;
  `;
  
  const TableDataBackground = styled.div`
    position: absolute;
    top: 0;
    height: 30px;
    width: 30px;
    background-image: url(&quot;http://assets.stickpng.com/images/58afdad6829958a978a4a693.png&quot;);
    background-size: 30px;
    background-repeat: no-repeat;
  `;
  </code></pre>