jquery hover only works on click event?

Question

i have this little jquery code running on jquery 1.10.1, what i want to do is quite basically console log on hover events on hovering over li class dash_item, but it only works when i click the item, not on hover

CODE:

$(document).ready(function(){
    $('.dash_item').on({

       mouseenter: function(){
        console.log("im here");
      },

      mouseleave: function(){
        console.log("im out");
      }
    });
});

the jsfiddle is here http://jsfiddle.net/JQAw3/

Answer 1

Seems to be a Google Chrome bug that can happen when you have a website open for a long time, including the Dev Tools.

I had the same problems, tried everything I could.

In the end, a simple browser restart helped.

Maybe it's also enough if you simply open the website in another tab.

Edit 2015-06-15: I encounter this problem every time I'm working on mouseenter and mouseleave in Chrome. For me, it's definitely enough to just close the tab and open the website in another.

Answer 2

You can try the jQuery hover() function. It takes a handlerIn and handlerOut.

Answer 3

works fine with hover

http://jsfiddle.net/blackjim/JQAw3/4/

$('.dash_item').hover(
    function () {
        console.log("im here");
    },
    function () {
        console.log("im out");
    }
);

Answer 4

Leaving this here in case anyone else stumbles across this. In early 2015 this is still a 'feature' in chrome/chromium where if the page is being viewed as a file (NOT served from a webserver) the mouse position events like mouseenter , mouseleave , mouseover , etc do not fire. Don't know if that was OP's issue but was mine when I stumbled across this.

Answer 5

No it doesn't - same problems with hover as mouseenter

I have had developer tools open for some time

Opened the page in firefox and it worked