由于原生 `
在 Web 开发中，常有需求在用户将鼠标移至下拉选项（<option>）时执行某些逻辑（如显示提示、预加载数据或高亮预览）。但需明确一个关键事实：原生 HTML <select> 中的 <option> 元素不支持标准的鼠标事件（如 onMouseOver、onMouseMove） —— 浏览器出于可访问性与跨平台一致性考虑，禁止对 <option> 绑定此类事件，即使 React 中写入了 onMouseOver，也不会被触发。
因此，不能依赖 <option onMouseOver={...}>，而应采用「间接检测」策略：监听 <select> 的 onMouseMove，并实时计算鼠标当前指向的 <option>。虽然 <select> 本身不暴露“当前悬停选项”的 API，但我们可通过以下方式近似实现：
- 利用 event.target.options 获取所有 <option> 集合；
- 结合 event.target.selectedIndex 获取当前选中项索引；
- ⚠️ 注意：selectedIndex 只反映“已选中项”，而非“悬停项” —— 所以该方案存在本质局限：它无法真正检测未选中的悬停行为，仅能在用户操作下拉菜单过程中，借助浏览器内部的视觉焦点变化（部分浏览器会在展开状态下更新 selectedIndex）进行粗略推断。
更可靠且兼容性更好的替代方案是：放弃原生 <select>，改用自定义下拉组件（如基于 <div> + <ul> + <li> 实现）。这样可完全掌控每个选项的事件绑定：
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 辅助探测——但务必做好降级处理与多浏览器验证。
