javascript - 当鼠标悬停在列表中的每个选择选项上时做一些事情(javascript)

Question

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

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

我知道我可能可以使用自定义下拉菜单来管理它，但我真的希望能够使用 native 选项来做到这一点。

到目前为止我已经尝试过:

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

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

但这仅在我将鼠标悬停在关闭的菜单上时才会触发。所以不好...

有什么想法吗？谢谢

Answer 1

这是不可能做到的，因为下拉菜单是由浏览器渲染的——当他们使用 option 元素渲染菜单时，当然，你在屏幕上看到的不再是 DOM 元素，而是浏览器对

某些浏览器可能会接受某些形式的 option 样式等...但最安全且可能是最好的做法是创建您自己的下拉菜单实现。

---

类似这样的东西(我快速为您绘制的 super super 简单的版本):

var c = document.getElementById('c');
var menu = document.getElementById('menu');
var options = menu.getElementsByTagName('p')

for(var i = 0; i < options.length; i++) {
  options[i].style.display = 'none';
  options[i].addEventListener('mouseover', function(){
    c.style.backgroundColor = this.getAttribute('data-color');
  })
}

menu.addEventListener('click', function(){
  for(var i = 0; i < options.length; i++) {
    options[i].style.display = options[i].style.display != 'none' ? 'none' : 'block';
  }
})

#c {height: 150px; width: 150px; float: right;}
#menu {display: inline-block; border: 1px inset #999; padding: 4px; cursor: pointer; box-shadow: 0 0 8px #aaa;}
#menu:hover {border: 1px inset #333}

<div id="c">Color</div>
<div id="menu">Menu
  <p data-color="yellow">Yellow</p>
  <p data-color="red">Red</p>
  <p data-color="green">Green</p>
  <p data-color="blue">Dark Blue</p>
</div>