当鼠标悬停在列表中的每个选择选项上时执行操作（javascript）

我想在鼠标悬停在列表中的每个选择选项上时运行一个函数

在本例中，我使用的是一个带有颜色列表的选择，我希望文档中一个单独元素的背景在我将鼠标悬停在每个选项上时更改为颜色。我现在有它，所以一旦选择了它，它就会变成正确的颜色，但我真的希望它在我实际选择之前在选项上方悬停时显示出来。我可以让事件侦听器识别此事件吗

我知道我可能可以通过自定义下拉菜单来管理这一点，但我真的希望能够使用本机选项来实现这一点

到目前为止，我已经尝试：

function showSelectValue(e) { 
    console.log(e.target.value) // or other function...
}

itemid('select').addEventListener('mouseover',showSelectValue,false); 

但这只是在我将鼠标悬停在关闭的菜单上时触发的。所以不好

有什么想法吗？

---

感谢

这无法完成，因为下拉菜单是由浏览器呈现的-当然，当浏览器使用option元素呈现菜单时，您在屏幕上看到的不再是DOM元素，而是浏览器对它的呈现

某些浏览器可能接受某些形式的

选项

样式设置等。。。但是，最安全、可能也是最好的做法是创建自己的下拉菜单实现

---

类似这样的内容（我很快为您绘制了一个超级简单的版本）：

var c=document.getElementById（'c'）；
var menu=document.getElementById（'menu'）；
var options=menu.getElementsByTagName（'p'）
对于（变量i=0；i

#c{高度：150px；宽度：150px；浮点：右；}
#菜单{显示：内联块；边框：1px插入#999；填充：4px；光标：指针；框阴影：08px#aaa；}
#菜单：悬停{边框：1px插入#333}

颜色
菜单
黄色
红色
绿色
深蓝色

不客气！是的，遗憾的是，浏览器制造商把简单的东西做得太复杂了。