时间戳

首页 > 解决方案 > ReactJS handleHover 更改类名

reactjs - ReactJS handleHover 更改类名

问题描述

我有行动组件 

state = {
        highlight: null
    }
      handleLeave = () => {
        this.setState({
          highlight: null
      })
      }
      handleHover = (e) =>{
        this.setState({
          highlight: 'highlight'
      })
      }


    <img onMouseEnter={this.handleHover} onMouseLeave={this.handleLeave} className={`${this.state.highlight}`} src="img" />

但是当我有一些图像时，例如：

<img onMouseEnter={this.handleHover} onMouseLeave={this.handleLeave} className={`${this.state.highlight}`} src="img" />
 <img onMouseEnter={this.handleHover} onMouseLeave={this.handleLeave} className={`${this.state.highlight}`} src="img" />

然后，当您将鼠标悬停在其中一个上时，每个人都会获得 className 'highlight'，但我只想突出显示我将鼠标悬停在其上的图像。提前感谢您的回答！

标签： reactjs

解决方案

您只需使用简单的 CSS 即可在您的图像上实现悬停效果。

像这样：

img.anyClassName:hover {
    //css stuff
}

这对您的使用来说还不够吗？

推荐阅读