IE and Chrome don't fire a mouseover event for

Question

My code only works in Firefox. Why is this?

HTML:

<select id="selecter">
         <option>one</option>
         <option>two</option>
         <option>three</option>
   </select>

Javascript:

$(function() {
   $(document).on("mouseover", "#selecter option",function(){
            alert(1)        
    });
});

I'm curious why IE and chrome don't fire a mouseover event. See this JSFiddle: http://jsfiddle.net/yT6Y5/72/ (Works perfectly in Firefox.)

How can I get IE and Chrome to fire a mouseover event?

Answer 1

maybe you should use , a different approach to bind the event

 $(function() {
    $("#selecter").mouseover(function(){
        alert(1)        
     });
  });

Answer 2

It seems, no events are actually fired when you hover over an option in IE & chrome,

At best should should bind on the change event.

$(function() {
    $("#selecter").change(function(){
            alert(1);
    });
});

Answer 3

The problem is that browsers render dropdowns differently. Chrome is rendering it not as an HTML component but as a native GUI one. That can't have hover handlers associated to it from JS.

If you want to make sure it works on all browsers either don't use a dropdown or get a script to create a dropdown that uses HTML elements