Стилизованные компоненты при наведении изменяют атрибут img src

Question

У меня есть стилизованный компонент, как показано ниже.Это кнопка входа в социальную сеть Google imgGoogleLogin - путь, загружаемый веб-пакетом.

Я хочу изменить атрибут src на другой src, когда он находится при наведении.

Есть ли способ добиться этого?Большое спасибо

const GoogleLoginButton = styled.img.attrs({
  src: imgGoogleLogin,
})`
  width: 190px;
  height: 45px;
  &:hover {
    cursor: pointer;
  }
`;

Answer 1

Я хотел добиться чего-то похожего, но обнаружил, что стилизованные компоненты не могут сделать это явно.Я должен был сделать это таким образом, то есть создать два компонента, один из которых скрыт, а когда родительский элемент наведен, я показываю его и скрываю другой.Кажется, хак, но лучше, чем использование e.setAttribute, я думаю.

const GoogleLoginButton = styled.img.attrs(
        props => ({'src': props.img})
    )`
    display: inline;
    width: 190px;
    height: 45px;
    &:hover {
        cursor: pointer;
    }
`;

const GoogleLoginButtonHover = styled.img.attrs(
        props => ({'src': props.img})
    )`
    display: none;
    width: 190px;
    height: 45px;
    &:hover {
        cursor: pointer;
    }
`;

const GoogleLoginButtonParent = styled.div`
    &:hover ${GoogleLoginButtonHover} {
        display: inline;
    }

    &:hover ${GoogleLoginButton} {
        display: none;
    }
`;

В своем рендере вы используете его так:

<GoogleLoginButtonParent>
    <GoogleLoginButton
        img = {props.img}
    />
    <GoogleLoginButtonHover
        img = {props.imgHover}
    />
</GoogleLoginButtonParent>

Answer 2

Этого можно добиться с помощью чистого CSS:

Заменив тег img на div и установив его CSS следующим образом:

div {
    background: url('to_first_image');
}
div:hover {
    background: url('to_second_image');
}

Если вы предпочитаете сохранить свой тег img и использоватьнекоторые JS:

onHover = (e) => {
  e.setAttribute('src', 'source_to_first_img');
}

onUnhover = (e) => {
  e.setAttribute('src', 'source_to_second_img');
}

Кредит на этот ответ: https://stackoverflow.com/a/18032363/10449875