将鼠标悬停在选择标签中的选项

Question

请为我的问题建议我一个解决方案。我有一个html 选择标记。当我将鼠标悬停在选择标记的任何选项上时，它必须在鼠标上方显示图像。我该怎么做？？

Answer 1

你可以做一些事情像

<select title="This is a select"> 
<option value="blah blah" onmouseover="window.status=this.value" title="blah blah">item 1</option> 
<option value="hello" onmouseover="window.status=this.value" title="hello">item 2</option> 
<option value="hi" onmouseover="window.status=this.value" title="hi">item 3</option> 
</select> 

参考mouseover更多

Answer 2

根据W3C规范，不被选择元素支持鼠标悬停事件。

除开发自定义下拉控件外，没有解决方案您的要求。

Answer 3

OnMouseover事件的选项只适用于Firefox和不工作在IE浏览器。 对于IE，使用JQuery或使用onMouseover选择标签

Answer 4

您可以简单地使用下面问题中的答案解决您的问题。有是解决鼠标事件问题一两种方式与select option纯JS

Mouse over option in select tag

一种方式 - 就是让与选项中选择元素<div>选择与<buttons>或<li>列表形式内。您可以在我的CodePen项目页面上看到它的工作原理： https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ