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是一个不错的选择。

如何在单个组件上进行悬停事件？

1 个答案: