React中select下拉项鼠标移出后样式异常，onMouseOut/onMouseLeave失效？

可以通过onmouseleave事件解决这个问题，onmouseout因事件冒泡特性，鼠标在选项间移动时会频繁触发，反而容易引发其他问题，更推荐用onmouseleave。

核心思路是：当鼠标完全离开select控件（包括展开的下拉选项区域）时，强制清除浏览器默认的选项高亮状态，具体实现如下：

内联事件写法 #

<select id="targetSelect" onmouseleave="clearOptionHighlight()">
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
  <option value="opt3">选项3</option>
  <option value="opt4">选项4</option>
</select>

<script>
function clearOptionHighlight() {
  const selectElement = document.getElementById('targetSelect');
  // 让select失去焦点，清除浏览器默认的悬停高亮
  selectElement.blur();
  // 若需保留原本选中项的选中状态，无需额外操作，blur不会改变selectedIndex
}
</script>

事件监听写法（更推荐，分离结构与逻辑） #

const selectElement = document.getElementById('targetSelect');
selectElement.addEventListener('mouseleave', () => {
  selectElement.blur();
});

原理说明 #

原生select的下拉选项高亮是浏览器的默认行为，当鼠标快速移出下拉区域时，浏览器可能未及时清除最后悬停选项的高亮状态。通过onmouseleave触发blur()方法，强制select控件失去焦点，会让浏览器重置所有选项的高亮样式，解决异常残留的问题。

如果之前尝试其他标签无效，是因为原生select的下拉列表属于浏览器渲染的原生控件，并非普通DOM子元素，自定义标签模拟的下拉组件逻辑和原生完全不同，无法直接复用解决方案。

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