javascript - IE and Chrome don't fire a mouseover event for <option> elements

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

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