当鼠标悬停在列表中的每个 select 选项上时执行某些操作 (javascript)

Question

我想要运行当鼠标悬停在列表中每个 select 选项上时的功能。

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

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

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

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

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

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

有什么想法吗？谢谢

Answer 1

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

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

大概是这样的（超超超简单的我速速给大家画的）：

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>

当鼠标悬停在列表中的每个 select 选项上时执行某些操作 (javascript)

do something when mouse hovers over each select option in the list (javascript)

html

javascript

select

hover