Question

Using a regular HTML select box :

<select>
    <option value="">click to select a task type</option>
    <option value="">Awesome Option</option>

When using this jQuery :

  $("select, option").live({
    mouseenter: function(){
      console.log("INSIDE");
    },
    mouseleave: function(){
      console.log("OUTSIDE");
    }
  });

When I click the select box, and mouse over any of the options, IE will respond with my mouse is “Outside”.

Is there a work around for that?

Answer 1

Nothing happens when you bind the event to just option. I don’t think you can bind events to that. Or, if you can, not all events; click for sure and apparently these too.

The behavior makes sense as you really are moving your mouse outside of the select element when you move down to select an option. The browser/OS handles displaying the menu. And it’s not just IE that does this. Chrome, too.

I would recommend using the blur event as it fires when the element loses focus. This will only fire when you click outside and close the menu.

 $("select").live({
    mouseenter: function(){
      console.log("INSIDE");
    },
    blur: function(){
      console.log("OUTSIDE");
    }
  });

DEMO