在鼠标悬停时更改React中的背景视频

<video className="background-video" loop autoPlay muted>
  <source src="path/to/video.mp4" type="video/mp4" />
</video>

state = {
  isHovered: false
};

handleMouseEnter = () => {
  this.setState({ isHovered: true });
};

handleMouseLeave = () => {
  this.setState({ isHovered: false });
};

import classNames from 'classnames';

render() {
  const { isHovered } = this.state;
  const videoClassName = classNames('background-video', {
    'hovered': isHovered
  });

  return (
    <div
      className={videoClassName}
      onMouseEnter={this.handleMouseEnter}
      onMouseLeave={this.handleMouseLeave}
    >
      <video loop autoPlay muted>
        <source src="path/to/video.mp4" type="video/mp4" />
      </video>
    </div>
  );
}

.hovered {
  background-color: #f00;
}