JavaScript中mouseover监听<select>的<option>无法触发问题求助

下面给你两个可行的解决思路：

1. 用自定义下拉组件替代原生（最推荐） # 既然原生控件不支持，咱们就自己造一个！用普通HTML元素模拟下拉菜单，这样就能完全掌控hover效果和所有交互。举个简单的例子： HTML结构 # <div class="custom-select"> <div class="select-trigger">请选择选项</div> <ul class="options-list"> <li class="option-item" data-value="1">选项1</li> <li class="option-item" data-value="2">选项2</li> <li class="option-item" data-value="3">选项3</li> </ul> </div> CSS样式（包含hover效果） # .custom-select { position: relative; width: 200px; } .select-trigger { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } .options-list { position: absolute; top: 100%; left: 0; right: 0; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; list-style: none; padding: 0; margin: 0; display: none; } .option-item { padding: 8px 12px; cursor: pointer; } .option-item:hover { background-color: #f0f0f0; color: #333; } .custom-select.open .options-list { display: block; } JS交互逻辑 # const selectTrigger = document.querySelector('.select-trigger'); const optionsList = document.querySelector('.options-list'); const optionItems = document.querySelectorAll('.option-item'); // 展开/收起下拉 selectTrigger.addEventListener('click', () => { document.querySelector('.custom-select').classList.toggle('open'); }); // 点击选项触发选择逻辑 optionItems.forEach(item => { item.addEventListener('click', () => { selectTrigger.textContent = item.textContent; // 这里可以把选中的值存起来，替代原生select的value console.log('选中的值：', item.dataset.value); document.querySelector('.custom-select').classList.remove('open'); }); }); // 点击外部收起下拉 document.addEventListener('click', (e) => { if (!e.target.closest('.custom-select')) { document.querySelector('.custom-select').classList.remove('open'); } }); 这种方式不仅能完美实现hover效果，还能自定义各种样式，完全不受浏览器原生控件的限制。 2. 原生的hack方案（不推荐，兼容性差） #

如果因为某些原因必须用原生，可以试试监听的mousemove事件，然后通过计算鼠标位置来判断悬停在哪个上。但这个方法有很大局限性：

• 不同浏览器的下拉列表渲染位置、尺寸计算逻辑不一样，很容易出错
• 下拉列表展开后，有些浏览器会把它放在单独的渲染层，无法获取准确的鼠标位置

简单示例代码（仅供参考，不保证所有浏览器生效）：

const selectEl = document.querySelector('select');

selectEl.addEventListener('mousemove', (e) => {
  const options = selectEl.options;
  const rect = selectEl.getBoundingClientRect();
  // 计算鼠标相对select的位置，然后估算对应的option索引
  const optionIndex = Math.floor((e.clientY - rect.top) / (rect.height / options.length));
  if (optionIndex >=0 && optionIndex < options.length) {
    console.log('当前悬停的选项：', options[optionIndex].text);
    // 这里可以手动给对应option加样式，但原生option的样式修改也受浏览器限制
  }
});

这个方法只能勉强实现“检测悬停”，但要给加个性化hover样式还是很难，因为大多数浏览器不允许修改原生的hover背景色等样式。

总的来说，自定义下拉组件是最优解，既能解决mouseover事件的问题，又能让你的下拉菜单样式更统一。

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