title: Hiding child component on hover state of parent using styled-component
body: <p>I have a react component like this - </p>
  
  <pre><code>const MyComponent = () =&gt; (
      &lt;ContainerSection&gt;
          &lt;DeleteButtonContainer&gt;
              &lt;Button
                  theme="plain"
                  autoWidth
                  onClick={() =&gt; {
                      onDeleteClick();
                  }}
              &gt;
                  Delete
              &lt;/Button&gt;
          &lt;/DeleteButtonContainer&gt;
      &lt;/ContainerSection&gt;
  );
  </code></pre>
  
  <p>I want to show the <code>DeleteButtonContainer</code> only when the user hovers over <code>ContainerSection</code>. Both of them are <a href="https://www.styled-components.com" rel="nofollow noreferrer"><code>styled-components</code></a>. I couldn't find any way to do it using just css (using hover state of parent inside child), so I used something like this using state - </p>
  
  <pre><code>const MyComponent = ()=&gt;{
      const [isHoveredState, setHoveredState] = useState&lt;boolean&gt;(false);
      return (&lt;ContainerSection onMouseEnter={() =&gt; setHoveredState(true)} onMouseLeave={() =&gt; setHoveredState(false)}&gt;
          &lt;DeleteButtonContainer style={{ display: isHoveredState ? 'block' : 'none' }}&gt;
              &lt;Button
                  theme="plain"
                  autoWidth
                  disabled={!isHoveredState}
                  onClick={() =&gt; {
                      onDeleteClick();
                  }}
              &gt;
                  Delete
              &lt;/Button&gt;
          &lt;/DeleteButtonContainer&gt;
      &lt;/ContainerSection&gt;)
  };
  </code></pre>
  
  <p>Now I want to always show <code>DeleteButtonContainer</code> when it's on mobile device since it doesn't have hover. I know I can always right more JS to achieve this, but I want to do it using CSS and if possible I want to remove state completely.  </p>
  
  <p>So is there a way to achieve this using just styled component and not writing custom JS?</p>