jQuery .on() hover not working for HTML5 select box

Question

I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,

$(document).on('hover', "select#selectBox", function() {
    alert("done");
  });

Please note that I'm using this snippet inside DOM document ready too.

I've tried changing the event to click, scroll, mouseover, mouseenter, etc too. Doesn't seem to work for those too.

Please point out where I'm going wrong.

I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/

EDIT : Thanks for the quick response everyone! I have fixed my mistakes :)

I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.

I'm using jQuery 2.1.3 .

JSFiddle here: https://jsfiddle.net/g9vf1mty/8/

Answer 1

$("select#selectBox").hover(function() {
 alert("working");
});

use hover function, in the above manner. and more importantly, you missed jQuery library too.

As on("hover") was deprecated form jQuery 1.8 , it won't work on Higher versions of jquery.

Answer 2

You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:

eventually filtering by event type inside handler (in/out)

$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
  alert("done: " + e.type);
});

Answer 3

You should use mouseenter event

and include jquery in your fiddle :)

Look also at this (SO question)[ Is it possible to use jQuery .on and hover?