如何监听用户悬停在select选项上的事件？

原生<option>元素无法直接监听onMouseOver这类鼠标事件——因为浏览器原生的<select>下拉列表是独立的系统控件，相关鼠标事件会被浏览器拦截，不会触发你绑定在<option>上的回调。

下面给出两种可行的解决思路：

一、自定义模拟下拉组件（推荐） #

放弃原生<select>，用普通HTML元素模拟下拉结构，这样能完全掌控每个选项的事件监听。以下是React实现示例：

组件代码 #

import { useState } from 'react';

const CustomSelect = ({ selected, nodes, onSelect, onOptionHover }) => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    <div className="custom-select-wrapper">
      {/* 模拟选择框触发器 */}
      <div 
        className="custom-select-trigger"
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
      >
        {selected || '请选择路径'}
      </div>
      {/* 下拉选项列表 */}
      {isDropdownOpen && (
        <div className="custom-select-options">
          {nodes.map((node, index) => {
            const optionValue = `${node.text.toLowerCase()}/input/`;
            return (
              <div
                key={`select-option-${index}`}
                className="custom-select-option"
                onClick={() => {
                  onSelect(optionValue);
                  setIsDropdownOpen(false);
                }}
                onMouseOver={() => onOptionHover(optionValue, node)}
              >
                {optionValue}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// 使用示例
// function YourComponent() {
//   const [selectedPath, setSelectedPath] = useState('');
//   const handleHover = (value, node) => {
//     console.log('悬停的选项:', value, node);
//   };
//   return (
//     <CustomSelect
//       selected={selectedPath}
//       nodes={nodes}
//       onSelect={setSelectedPath}
//       onOptionHover={handleHover}
//     />
//   );
// }

基础样式（让组件看起来像原生select） #

.custom-select-wrapper {
  position: relative;
  width: 240px;
}

.custom-select-trigger {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  font-size: 14px;
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ced4da;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
}

.custom-select-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.custom-select-option:hover {
  background-color: #f8f9fa;
}

二、原生select的hack方案（兼容性差，不推荐） #

如果一定要保留原生<select>，可以尝试在<select>上监听mousemove事件，通过计算鼠标位置匹配对应的选项。但这种方法仅在部分浏览器（如Chrome）中可能生效，且逻辑不稳定：

const handleSelectMouseMove = (e) => {
  const selectEl = e.target;
  const options = selectEl.options;
  
  // 遍历选项，判断鼠标是否在选项区域内
  for (let i = 0; i < options.length; i++) {
    const optionRect = options[i].getBoundingClientRect();
    if (e.clientY >= optionRect.top && e.clientY <= optionRect.bottom) {
      console.log('当前悬停的选项:', options[i].value);
      break;
    }
  }
};

// 绑定到select元素上
<select
  id="inputPath"
  value={selected.input_path}
  className="form-control"
  onMouseMove={handleSelectMouseMove}
>
  {nodes.map((node, i) => {
    const optionValue = `${node.text.toLowerCase()}/input/`;
    return (
      <option
        key={`select-input-input-${i}`}
        value={optionValue}
      >{optionValue}</option>
    );
  })}
</select>

注意：这种方法在Firefox等浏览器中基本无效，因为浏览器不会让鼠标事件穿透到原生下拉选项中，仅作临时测试用。

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