觸發onMouseOver事件時顯示新div的問題

我制作了一個 CSS 網格，<p>{name}</p>在每個網格項上顯示一個元素。當onMouseOver懸停事件時，我想顯示一個新的 div（包含在反應片段中），但在同一位置。
我沒有使用 CSS，而是使用 JavaScript 來撰寫邏輯 - 當用戶將滑鼠懸停在網格專案上時，它會將布林值（保存為狀態變數isMouseHovering）從 false翻轉為 true。當此狀態值為真時，我有一個顯示“新”div 的條件陳述句。

問題是此邏輯適用于網格項容器元素，而不適用于網格容器內的元素。所以當我超過網格時，它會做它應該做的事情并顯示新的 div。但是，當我將滑鼠懸停在網格項容器元素內的 p 標記上時，它會在狀態之間閃爍。

無論用戶將滑鼠懸停在網格專案的哪個位置，我如何構造它以使 div 在懸停時發生變化？

專案.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

uj5u.com熱心網友回復：

問題是您使用的是 onm ouseOver 和 onm ouseOut 而不是 onm ouseEnter 和 onm ouseLeave。

當您將滑鼠懸停在導致您描述的錯誤的元素的子元素上時，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

uj5u.com熱心網友回復：

試試這個：

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')}
            onm ouseLeave={() => handleOnMouseOver('out')}
        >
        <span id="dev_span" style={{ display: 'none' }}>
          <a href="https://xxxxxxxxxxxxxxxx">
            <p>website</p>
          </a>
        </span>
          <p>{name}</p>
        </div>
    )
  }

uj5u.com熱心網友回復：

您可以檢查觸發事件的元素。

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)}
      onm ouseOut={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;

標籤：

上一篇：如何在陣列物件中定位布林值。JavaScript

下一篇：是創建元素和設定innerHTML更高效還是直接添加HTML？