Target another styled component on hover
<p>What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button.</p>

<p>I could implement some state on the component and toggle a property on hover but was wondering if there is a better way to do this with styled-cmponents.</p>

<p>Something like the following doesn't work but would be ideal:</p>

<pre><code>const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &amp;:not(:last-child) {
    margin-bottom: 2rem;
  }
  &amp;:hover {
    .button {
      display: none;
    }
  }
`
</code></pre>