鼠标悬停事件触发方法全解析

const CustomSelect = ({ options, value, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="custom-select" onMouseLeave={() => setIsOpen(false)}>
      <div 
        className="select-trigger" 
        onClick={() => setIsOpen(!isOpen)}
      >
        {value || '请选择'}
      </div>
      {isOpen && (
        <ul className="select-options">
          {options.map((opt, i) => (
            <li
              key={i}
              className={`option-item ${value === opt.value ? 'active' : ''}`}
              onMouseEnter={() => console.log('Hovered:', opt.value)}
              onClick={() => {
                onChange(opt.value);
                setIsOpen(false);
              }}
            >
              {opt.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

✅ 优势：

• 完全支持 onMouseEnter/onMouseLeave；
• 可自由添加 Tooltip、动画、异步预加载等交互；
• 无障碍友好（配合 role="listbox" / role="option" 及键盘导航可完整支持）。

❌ 原生 <select> 的 onMouseMove 方案局限性总结：

• 仅在下拉菜单展开时部分浏览器（如 Chrome）会动态更新 selectedIndex，Firefox/Safari 行为不一致；
• 无法区分“悬停”与“聚焦”，也无法捕获未展开状态下的悬停；
• 不具备可预测性和跨浏览器稳定性，不建议用于生产环境的关键交互。

综上，若需精确、稳定、可扩展的选项悬停事件，请优先构建语义化、可访问的自定义下拉控件；仅当项目强约束必须使用原生 <select> 且接受体验妥协时，才考虑 onMouseMove 辅助探测——但务必做好降级处理与多浏览器验证。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《鼠标悬停事件触发方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。