Question

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

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

我知道我可以通过自定义下拉菜单来管理它，但我真的希望能够使用原生选项来完成它。

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

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

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

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

有什么想法吗？感谢

Answer 1

这是不可能的，因为下拉菜单是由浏览器呈现的 - 当他们使用选项元素来呈现菜单时，当然，你在屏幕上看到的不再是DOM元素，而是浏览器＆＃39;演绎它。

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

像这样的东西（我很快为你勾勒出的超级简单版本）：

＆＃13;

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';
  }
})

＆＃13;

#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}

＆＃13;

<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>

＆＃13;

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

1 个答案: