时间戳

首页 > 解决方案 > 如何在不使用 onMouseOut 和 onMouseHover 的情况下通过 CSS 文件将图像悬停在 ReactJs 中

reactjs - 如何在不使用 onMouseOut 和 onMouseHover 的情况下通过 CSS 文件将图像悬停在 ReactJs 中

问题描述

我有这样的结构代码：

<Row className="description d-flex justify-content-between">
    <Col className="social" as="a" href="/#">
        <Image className="social-icon" src={Facebook}
               onMouseOver={e => e.currentTarget.src = FBHover}
               onMouseOut={e => e.currentTarget.src = Facebook}
               alt="Facebook" />
    </Col>

    <Col className="social" as="a" href="/#">
    <Image className="social-icon" src={Youtube}
           onMouseOver={e => e.currentTarget.src = YoutubeHover}
           onMouseOut={e => e.currentTarget.src = Youtube}
           alt="Youtube" />
    </Col>

    <Col className="social" as="a" href="/#">
    <Image className="social-icon" src={Google}
           onMouseOver={e => e.currentTarget.src = GoogleHover}
           onMouseOut={e => e.currentTarget.src = Google}
           alt="Google" />
    </Col>
</Row>

在这种情况下，我有一个问题。我不应该在这个文件上使用onMouseOutand 。 我必须使用悬停和更改该图标而不是像那样的事件，我也不能为此使用Image 标签，我可以使用图像精灵，有人可以帮我解决这种情况吗？onMouseOver
CSS

我的图像放在src/asses/icon文件夹中

标签： reactjsimage

解决方案

通过class selector 在css中使用如下：

.social-icon:hover {
   // add your styles on hover here
}

推荐阅读