当鼠标悬停在列表中的每个选择选项上时执行某些操作(javascript) [英] do something when mouse hovers over each select option in the list (javascript)

问题描述

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

I want run a function when the mouse hovers over each select option in the list.

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

In this example what I have is a select with a list of colours and I want the background of a separate element in the document to change to the colour as I hover over each option. I have it at the moment so it changes to the correct colour once selected but I'd really like it to show as I hover over the options before I actually select. Can I get an event listener to recognise this event?

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

I'm aware I can probably manage this with a custom dropdown but I really want to be able to do it with the native options.

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

So far i've tried:

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

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

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

but this is only firing when I hover over the closed menu. So no good...

有什么想法吗? 谢谢

推荐答案

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

This can't be done because dropdown menues are rendered by browsers - while they are using the option element to render the menu, of course, what you see on the screen is no longer a DOM element, but a browser's rendition of it.

某些浏览器可能接受某些形式的option样式等，但是最安全也是最好的选择是创建您自己的下拉菜单实现.

Some browsers might accept some forms of option styling, etc... but your safest and probably the best move would be to create your own implementation of the dropdown menu.

这样的事情(我很快为您绘制的一个超级超级简单的版本):

Something like this (a super-super simple version I quickly sketched for you):

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>

这篇关于当鼠标悬停在列表中的每个选择选项上时执行某些操作(javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！