javascript - Make div follows cursor inside parent div - no NPM

Question

In my react component, I have this logic:

My return function is:

return (
      <div>
          <Link
            onMouseEnter={() => this.handleMouseHover(true)}
            onMouseLeave={() => this.handleMouseHover(false)}
            onMouseMove={this.handleCoverTemplateHover}
            style={{position: "relative"}}
            to={link}>
            {this.renderCellContainer(data, selectedSectionIndex, cellIndex)}
            {this.renderHoveredDataOnImages(data,selectedSectionIndex, cellIndex)}
          </Link>
      </div>
    )

The handleMouseHover triggers the hover:

 handleMouseHover = (bool) => {
    this.setState({
      isHovered: bool
    })
  };

The handleCoverTemplateHover sets the state with clientX, Y values:

  handleCoverTemplateHover = (e) =>  {
    this.setState({
      x: e.clientX,
      y: e.clientY
    });
  };

Now, the renderHoveredDataOnImages is as such:

  renderHoveredDataOnImages = (data, selectedSectionIndex, cellIndex) => {

    let id = `catalogue_cell${cellIndex}`;
    let parentDiv = document.getElementById(id);

      if(!parentDiv || !this.state.isHovered){
        return null;
      }

      let getBoundingClientRect = parentDiv.getBoundingClientRect();
      let left = this.state.x - getBoundingClientRect.left;
      let top = this.state.y - getBoundingClientRect.top;

      let dynamicStyling = {
        left: left,
        top: top
      };

      return (
        <div
          style={dynamicStyling}
          className="hovered_catalogue_image_data">
            <div>
              <span>{left}</span>
              <span>{top}</span>
              <span>{data.author}</span>
            </div>
            <div>
              <span>{data.editor}</span>
              <span>{data.dimensions}</span>
              <span>{data.year}</span>
            </div>
        </div>
      )
  };

Here's my use case:

I have a carousel of divs as such, composed of multiple rows. On the first one, the cursor is accurately positioned.

However, when I enter in the second row, the cursor is positioned at the end of the page (it should still follow my cursor) on these second row's divs.

What is happening here?

question from:https://stackoverflow.com/questions/65835126/make-div-follows-cursor-inside-parent-div-no-npm

Answer 1

Waitting for answers