javascript - 如何在单个组件上制作悬停事件？

Question

我想在照片上显示 h4 照片标题，但前提是照片悬停。我尝试使用 onMouseEnter 和 onMouseLeave 执行此操作，但如果我使用许多相同的组件，并且当我将鼠标悬停在其中一个组件上时，页面上的每个组件都会显示照片标题。我可以在我的代码中做一些事情来仅在悬停的照片上显示标题吗？

单张照片:

const Photo = props => (
  <div onMouseEnter={props.onMouseEvent} 
       onMouseLeave={props.onMouseEvent} 
       style={props.backgroundImage}>
    <h4>{props.hovered && props.title}</h4>
  </div>
); 

显示许多照片组件:

class Gallery extends Component {
  state = {
    photos: [], // fetched photos here
    hovered: false
  };

  toggleMouseHover = () => this.setState(prev => ({ hovered: !prev.hovered }));

  render() {

    return (
        {this.state.photos.map(photo => {
          <Photo
            backgroundImage={{ backgroundImage: `url(${photo.src})` }}
            title={photo.title}
            onMouseEvent={this.toggleMouseHover}
            hovered={this.state.hovered}
          />
        })}
    );
  }
}

我想在 CSS::before 或::after 中使用内容，但我不能在 React 中使用它。

Answer 1

您可以使用纯 css 来完成此操作，使用 react 应该无关紧要。

单张照片:

const Photo = props => (
  <div style={props.backgroundImage} className="div-photo">
    <h4 className="photo-title">{props.title}</h4>
  </div>
); 

CSS:

div.div-photo:hover > h4.photo-title {
     display: block;
}

div.div-photo > h4.photo-title {
    display: none;
}

我认为这应该可行。如果您愿意，可以使用属性 visibility。此外，如评论中所述，如果您想使用淡入/淡出效果，属性 opacity 是一个不错的选择。