React.js中onMouseOver/onMouseOut交互时保持Div可见的问题解决

核心问题原因 #

• onMouseOut事件会在鼠标从父元素移动到子元素时触发（子元素绝对定位脱离父元素文档流范围），导致弹窗意外隐藏；
• 闪烁是因为onMouseOver/onMouseOut在鼠标在父、子元素间切换时频繁触发，引发状态反复切换。

解决方案一：CSS伪类实现（推荐） #

无需JS事件，直接通过CSS原生:hover伪类控制弹窗显示，稳定性更高：

/* 父元素设置相对定位 */
.cart-icon {
  position: relative;
}

/* 默认隐藏弹窗 */
.cart-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  /* 补充样式：宽度、背景、阴影等 */
  width: 280px;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 父元素悬停时显示弹窗 */
.cart-icon:hover .cart-dropdown {
  display: block;
}

浏览器原生支持该逻辑，完全避免事件触发问题，代码更简洁。

解决方案二：替换JS事件类型 #

若必须用JS控制状态，将onMouseOver/onMouseOut替换为onMouseEnter/onMouseLeave：

import { useState } from 'react';

function Cart() {
  const [isHovered, setIsHovered] = useState(false);

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

  return (
    <div 
      className="cart-icon" 
      style={{ position: 'relative' }}
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      {/* 购物车图标 */}
      <span>🛒</span>
      {/* 弹窗内容 */}
      <div 
        className="cart-dropdown" 
        style={{ 
          position: 'absolute',
          top: '100%',
          left: 0,
          display: isHovered ? 'block' : 'none',
          width: 280px,
          padding: '1rem',
          backgroundColor: '#fff',
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
        }}
      >
        购物车为空
      </div>
    </div>
  );
}

mouseenter/mouseleave仅在鼠标完全进入/离开父元素及其所有子元素时触发，不会因鼠标在父、子元素间切换而频繁触发，彻底解决弹窗消失和闪烁问题。

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