React修复hover方法异常：红色删除按钮hover时随机消失

我之前也碰到过完全一样的坑！这个问题的根源是鼠标事件的边界判断逻辑：当你把鼠标从图片移到红色删除按钮上时，浏览器会触发父容器.image的onMouseLeave事件——因为它认为你“离开”了图片这个子元素，哪怕你其实还在父容器内部的另一个子元素上，结果就是toggleDiv被设为false，删除按钮直接消失了。

下面给你两个不依赖额外CSS的修复方案，都是我实际项目里用过的：

方案1：用事件对象判断是否真的离开容器 #

修改你的鼠标事件处理函数，在onMouseOut时检查鼠标是不是真的离开了整个.image容器，而只是在它的子元素之间切换：

const handleMouseOver = () => {
  setToggleDiv(true);
};

const handleMouseOut = (e) => {
  // 检查鼠标即将进入的元素是不是当前容器的子元素
  const isStillInContainer = e.currentTarget.contains(e.relatedTarget);
  if (!isStillInContainer) {
    setToggleDiv(false);
  }
};

// 渲染部分可以简化一下
<div>
  <h3>preview items</h3>
  <div className="image" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
    <img src={myUrl} />
    {/* 直接用toggleDiv判断，不用写全等比较 */}
    {toggleDiv && <div className="delete" onClick={() => handleDelete(myPhotoId)}> X </div>}
    {/* 注意这里变量名拼写，你之前写的myPohotTitle应该是myPhotoTitle */}
    <div>{myPhotoTitle}</div>
  </div>
</div>

这里的核心是e.relatedTarget——它代表鼠标接下来要进入的元素。如果这个元素是当前容器的子元素，说明我们只是在容器内部移动，没必要隐藏删除按钮。

方案2：全局监听鼠标位置（更健壮的方案） #

如果方案1在某些复杂场景下还是有问题，比如容器嵌套了多层子元素，可以用useRef获取容器元素，然后全局监听鼠标移动来判断位置：

import { useRef, useState, useEffect } from 'react';

const YourComponent = () => {
  const [toggleDiv, setToggleDiv] = useState(false);
  // 用ref拿到容器DOM元素
  const imageContainerRef = useRef(null);

  useEffect(() => {
    const handleMouseMove = (e) => {
      // 检查鼠标当前是否在容器或它的子元素上
      const isMouseInContainer = imageContainerRef.current?.contains(e.target);
      setToggleDiv(isMouseInContainer);
    };

    window.addEventListener('mouseover', handleMouseMove);
    // 组件卸载时要移除监听，避免内存泄漏
    return () => window.removeEventListener('mouseover', handleMouseMove);
  }, []);

  return (
    <div>
      <h3>preview items</h3>
      <div className="image" ref={imageContainerRef}>
        <img src={myUrl} />
        {toggleDiv && <div className="delete" onClick={() => handleDelete(myPhotoId)}> X </div>}
        <div>{myPhotoTitle}</div>
      </div>
    </div>
  );
};

这个方案通过全局监听鼠标事件，只要鼠标在容器范围内就保持删除按钮显示，彻底解决了子元素间切换触发的事件问题。

最后提两个小细节：

• 你代码里的myPohotTitle拼写错了，应该是myPhotoTitle，别小看这个，有时候会导致奇怪的bug
• 没必要写toggleDiv === true，直接用{toggleDiv && ...}就够了，React里布尔值会被正确处理

内容的提问来源于stack exchange，提问作者M.I