title: Target another styled component on hover
body: <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>