Mouse Over Option In Select Tag

Please suggest me a solution for my problem. I have a html select tag. When i mouse over on any option of select tag, it has to show an image on mouse over. How can i do it??

Solution 1:

According to the w3c spec, mouseover event is not supported by the option element.

There is no solution your requirement except to develop a custom drop down control.

Solution 2:

OnMouseover event for option works only in firefox and doesnt work in IE. For IE, either use JQuery or use onMouseover for select tag

Solution 3:

You can simply solve your problem using the answer in the question below. There are a two ways of solving mouse events problem with select option on pure JS

Mouse over option in select tag

One of the way - is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below: https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ

Solution 4:

You can do some thing like

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

refer to the mouseover for more