Question

我有一个样式如下的组件。这是一个Google社交登录按钮imgGoogleLogin是webpack加载的路径。

当鼠标悬停时，我想将src属性更改为另一个src。

有什么办法可以做到这一点？非常感谢

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

Answer 1

您可以使用纯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

Answer 2

我想实现类似的目标，但是我发现样式化的组件无法明确地做到这一点。我必须以这种方式进行操作，即创建两个组件，一个隐藏，而当父对象悬停时，我取消隐藏它，然后隐藏另一个。似乎很古怪，但比我认为使用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>

悬停时的样式化组件更改img src属性

2 个答案: