onMouseOver 事件触发时显示新 div 的问题

Question

我制作了一个 CSS 网格，在每个网格项目上显示一个 <p>{name}</p> 元素。当 onMouseOver 悬停事件我想显示一个新的 div （包含在反应片段中），但在相同的位置。
我没有使用 CSS，而是使用 JavaScript 对此编写逻辑代码 - 当用户将鼠标悬停在网格项上时，它会翻转一个布尔值（保存为状态变量 isMouseHovering) 从假到真。当此状态值为真时，我有一个显示 'new' div 的条件语句。

问题是此逻辑适用于网格项容器元素，而不适用于网格容器内的元素。因此，当我越过网格时，它会执行它应该执行的操作并显示新的 div。但是，当我将鼠标悬停在网格项目容器元素内的 p 标签上时，它会在状态之间闪烁。

无论用户将鼠标悬停在网格项目的哪个位置，我该如何构造它以便 div 在悬停时发生变化？

Project.js

import { useState } from 'react'

const Project = ({name,url,techStack,image,blurb}) => {

  const [isMouseHovering, setMouseHovering] = useState(false);

  const handleOnMouseOver = () => setMouseHovering((isMouseHovering) => !isMouseHovering);  
  const handleMouseOut = () =>  setMouseHovering(false);
  
  return(
    <div className = 'grid-item' onMouseOver={handleOnMouseOver} onMouseOut = {handleMouseOut}>
      {
        isMouseHovering ? (
        // element I want to display when mouse hovering, in same position as <p>{name}</p> element
        <>
          <a href='https://xxxxxxxxxxxxxxxx'>
            <p>website</p>
          </a>
        </>
        )
        : 
        <p>{name}</p>
      }
    </div>
  )
}


export default Project

Answer 1

试试这个：

import { useState } from 'react'

  const Project = ({name,url,techStack,image,blurb}) => {
    const handleOnMouseOver = (dir) => {
      const ele = document.getElementById('dev_span');
      if (dir === 'in' && ele) {
        ele.style.display = 'block';
      } else if (ele) {
        ele.style.display = 'none';
      }
    };
    return(
        <div
            className="grid-item"
            onMouseEnter={() => handleOnMouseOver('in')}
            onMouseLeave={() => handleOnMouseOver('out')}
        >
        <span id="dev_span" style={{ display: 'none' }}>
          <a href="https://xxxxxxxxxxxxxxxx">
            <p>website</p>
          </a>
        </span>
          <p>{name}</p>
        </div>
    )
  }

Answer 2

您可以检查触发事件的元素。

import { useState } from "react";

const Project = ({ name, url, techStack, image, blurb }) => {
  const [isMouseHovering, setMouseHovering] = useState(false);

  const handleOnMouseOver = (e) => {
    if (e.target.className === "grid-item") {
      setMouseHovering((isMouseHovering) => !isMouseHovering);
    }
  };

  const handleMouseOut = () => setMouseHovering(false);

  return (
    <div
      className="grid-item"
      onMouseOver={(e) => handleOnMouseOver(e)}
      onMouseOut={handleMouseOut}
    >
      {isMouseHovering ? (
        // element I want to display when mouse hovering, in same position as <p>{name}</p> element
        <>
          <a href="https://xxxxxxxxxxxxxxxx">
            <p>website</p>
          </a>
        </>
      ) : (
        <p>{name}</p>
      )}
    </div>
  );
};

export default Project;

Answer 3

问题是您使用的是 onMouseOver 和 onMouseOut 而不是 onMouseEnter 和 onMouseLeave。

当您将鼠标悬停在导致您描述的错误的元素的子元素上时，将触发 onMouseOut。

您还在 handleMouseOver 函数中切换状态，但据我了解，您希望在悬停 div.

时将其设置为 true

import { useState } from 'react';
const Project = ({ name, url, techStack, image, blurb }) => {
    const [isMouseHovering, setMouseHovering] = useState(false);

    const handleMouseEnter = () => setMouseHovering(true);
    const handleMouseLeave = () => setMouseHovering(false);

    return (
        <div
            className="grid-item"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            {isMouseHovering ? (
                // element I want to display when mouse hovering, in same position as <p>{name}</p> element
                <>
                    <a href="https://xxxxxxxxxxxxxxxx">
                        <p>website</p>
                    </a>
                </>
            ) : (
                <p>{name}</p>
            )}
        </div>
    );
};

export default Project;

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

onMouseOver 事件触发时显示新 div 的问题

Problems displaying new div when onMouseOver event fires

javascript

reactjs

css-grid