React实现鼠标悬停图片显菜单，离开菜单/图片隐菜单问题

你的代码目前只处理了鼠标进入图片时显示菜单，但未处理离开逻辑，且图片和菜单是独立元素——鼠标移到菜单上时会离开图片区域，导致菜单意外隐藏。可以通过以下方式修复：

核心修改思路 #

• 用父容器包裹图片和菜单，将鼠标事件绑定在父容器上，确保鼠标在图片或菜单范围内都算悬停状态。
• 使用onMouseEnter（仅进入容器时触发一次）替代onMouseOver，避免子元素触发重复事件；用onMouseLeave在离开容器时隐藏菜单。

修改后的代码 #

import "../styles/Background.css";
import Menu from './Menu'
import { useState } from "react";
import skull from '../assets/bg3.gif'

function Background () {
  const title = "Blog"
  const title_header = "True Crime Story"
  const [showMenu, setShowMenu] = useState(false)

  return (
    <div className="body">
        <div className="modal">
            <div className="modal-content">
                <title>{title}</title>
                <div className="main-title">
                    <h1>{title_header}</h1>
                </div>
                <p>Latin text</p>
            </div>
        </div>
        {/* 包裹图片和菜单的父容器，绑定鼠标事件 */}
        <div 
          className="image-menu-container"
          onMouseEnter={() => setShowMenu(true)}
          onMouseLeave={() => setShowMenu(false)}
        >
          <img src={skull} className="image" />
          {showMenu && <Menu />}
        </div>
    </div>
  )
}

export default Background

额外CSS建议（可选） #

如果菜单是绝对定位的，需给父容器设置相对定位，避免菜单超出容器范围导致onMouseLeave提前触发：

.image-menu-container {
  position: relative;
  display: inline-block; /* 让容器自适应图片尺寸 */
}

/* 调整菜单定位示例 */
.menu {
  position: absolute;
  top: 100%; /* 菜单显示在图片下方 */
  left: 0;
  margin-top: 8px;
}

关键说明 #

• onMouseEnter和onMouseLeave是容器级事件，仅在鼠标进入/离开整个容器时触发，不会被内部子元素干扰。
• 用{showMenu && <Menu />}替代三元表达式，写法更简洁。
• 确保Menu组件的区域完全包含在父容器的鼠标检测范围内，否则鼠标移到菜单边缘可能误触发隐藏。

内容的提问来源于stack exchange，提问作者yunaie