title: Styled components on hover change img src attribute
body: <p>I have a styled component as below. It is a google social login button <code>imgGoogleLogin</code> is a path loaded by webpack. </p>
  
  <p>I want to change the src attribute to another src when it is on hover. </p>
  
  <p>Is there any way to achieve this? Thanks a lot</p>
  
  <pre><code>const GoogleLoginButton = styled.img.attrs({
    src: imgGoogleLogin,
  })`
    width: 190px;
    height: 45px;
    &amp;:hover {
      cursor: pointer;
    }
  `;
  </code></pre>