如何在鼠标悬停select选项时获取对应option的值？

原生的<select>控件中的<option>元素无法直接监听mouseover事件，因为下拉菜单是浏览器提供的原生UI组件，不属于常规DOM可交互元素范畴，不同浏览器对这类原生控件的事件支持存在限制，直接绑定事件不会生效——这也是你之前的代码没有输出的原因。

要实现鼠标悬停选项时获取值的需求，必须通过自定义模拟下拉菜单的方式来实现，这种方式能完全兼容Edge、Chrome、Firefox和Safari浏览器。

实现方案：自定义模拟下拉菜单 #

HTML结构 #

用<div>和<ul>模拟原生select的结构，每个选项对应<li>元素，并通过data-value存储对应的值：

<div class="custom-select" id="customTestSelect">
  <div class="select-trigger">选择选项</div>
  <ul class="select-options">
    <li data-value="0">Disable</li>
    <li data-value="1">Enable</li>
    <li data-value="2">Hidden</li>
    <li data-value="4">Failover</li>
  </ul>
</div>

CSS样式 #

模拟原生select的视觉效果，控制下拉菜单的展开/收起状态：

.custom-select {
  position: relative;
  width: 150px;
  font-family: Arial, sans-serif;
}

.select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.select-options li {
  padding: 8px 12px;
  cursor: pointer;
}

.select-options li:hover {
  background-color: #f0f0f0;
}

.custom-select.active .select-options {
  display: block;
}

JavaScript交互 #

处理下拉菜单的展开收起逻辑，以及鼠标悬停时获取选项值：

const selectContainer = document.getElementById('customTestSelect');
const trigger = selectContainer.querySelector('.select-trigger');
const options = selectContainer.querySelectorAll('.select-options li');

// 点击触发器展开/收起下拉菜单
trigger.addEventListener('click', () => {
  selectContainer.classList.toggle('active');
});

// 监听鼠标悬停事件，输出选项值
options.forEach(option => {
  option.addEventListener('mouseover', () => {
    const value = option.getAttribute('data-value');
    console.log('悬停的选项值：', value);
    // 此处可添加你的业务逻辑
  });
});

// 点击页面其他区域收起菜单
document.addEventListener('click', (e) => {
  if (!selectContainer.contains(e.target)) {
    selectContainer.classList.remove('active');
  }
});

方案说明 #

• 完全基于常规DOM元素实现，所有事件（包括mouseover）都能稳定触发，兼容所有主流浏览器。
• 通过data-value属性存储选项对应的值，悬停时直接读取即可，逻辑清晰。
• 额外实现了点击外部区域收起菜单的交互，体验更贴近原生select控件。

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