javascript - 超过元素 REACT 时使 img 跟随光标

Question

我正在尝试创建一种类似于此处找到的效果：https ://gruev.space/about 。当您将鼠标悬停在某些单词上时，会出现一个图像并跟随您的光标。不过，我的实现会有些不同，因为当图像出现时我不需要看到图像下的字符。当我将鼠标悬停在段落中的某些单词上时，我只是试图弹出一个图像并跟随我的光标。我正在尝试创建一个反应组件，该组件可以包含一个带有“可悬停”的某些突出显示的单词的段落。

以下是我到目前为止所尝试的。我发现“pointer-events：none”属性非常重要，这样当图像出现然后又自行删除时，onMouseEnter 和 onMouseLeave 事件就不会被一遍又一遍地触发。

我需要帮助的是弄清楚如何将这些“可悬停”单词嵌入到段落中。

import React from "react";
import "../../index.css";
import codingJoke from "../../images/codingJoke.png";
import "./raisedTextContainer.css";

export default class RaisedTextContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mouseOver: false };
    this.showImageWhenHover = this.showImageWhenHover.bind(this);
    this._onMouseMove = this._onMouseMove.bind(this);
  }

  componentDidMount() {
    this.imageUpdateInterval = setInterval(this.showImageWhenHover, 10);
  }
  componentWillUnmount() {
    clearInterval(this.imageUpdateInterval);
  }

  showImageWhenHover(e) {
    console.log(this.state);
    if (this.state.mouseOver) {
      let x = this.state.mouseX;
      let y = this.state.mouseY;
      const image = document.querySelector(".hoverimage");
      image.style.left = x - 300 + "px";
      image.style.top = y - 150 + image.style.height / 2 + "px";
      console.log(image.style.left, image.style.top);
      //this.forceUpdate();
    }
  }
  _onMouseMove(e) {
    this.setState({ mouseX: e.clientX, mouseY: e.clientY });
  }

  render() {
    return (
      <div className="grid-item rounded raised">
        <div
          style={{ "z-index": 2 }}
          className="photo-hover"
          onMouseMove={this._onMouseMove}
          onMouseEnter={() => {
            this.setState({ mouseOver: true });
            const image = document.querySelector(".hoverimage");
            image.style.display = "block";
          }}
          onMouseLeave={() => {
            this.setState({ mouseOver: false });
            const image = document.querySelector(".hoverimage");
            image.style.display = "none";
          }}
        >
          <h3>test Image hover thing</h3>
        </div>
        <div class="hoverimage">
          <img src={codingJoke} />
        </div>
        <p>{this.props.paragraph}</p>
      </div>
    );
  }
}

.hoverimage {
    position: absolute;
    display: none;
    pointer-events: none;
}

标签： javascripthtmlcssreactjsreact-component