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/

It works on hover for me, using Chrome, what browser are you using? — Samuel R
– Samuel R, Commented Jun 26, 2013 at 18:42
im using chrome aswell, however i just tried on mozilla and it works, thats very weird — unknown
– unknown, Commented Jun 26, 2013 at 18:42

Jonas Sourlier · Accepted Answer · 2015-06-15 07:39:47Z

43

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.

edited Jun 15, 2015 at 7:39

answered Aug 27, 2014 at 9:57

Jonas Sourlier

14.6k20 gold badges85 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rob Osborne Over a year ago

It doesn't appear to be enough to open in another tab. I had to kill the browser. Thank you!

Nelson Rothermel Over a year ago

Confirmed restart worked. Wasted an hour on this, but you probably saved me a day!

lazd Over a year ago

I'm sad to report this is still a problem as of the time of this post. Thanks, you saved me tons of time!

Shautieh Over a year ago

+1000. One year later, and I just stumbled upon this same bug (using Chromium on Ubuntu)! I lost a few hours trying to solve this as it stopped working just after some code changes and I thought the problem came from my code!!!! I closed the tab and opened the page again in a new tab and my code worked again. I almost never restart Chromium so I owe you a lot of debugging time!

Sam R. Over a year ago

I noticed this only happens for me when Chrome Responsive view is active. Command + Shift + M will deactivate and the hover works again.

|

Gareth Thomas · Accepted Answer · 2016-07-31 02:36:53Z

1

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

answered Jul 31, 2016 at 2:36

Gareth Thomas

4303 silver badges4 bronze badges

Comments

CWitty · Accepted Answer · 2013-06-26 18:44:30Z

0

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

answered Jun 26, 2013 at 18:44

CWitty

4,5464 gold badges25 silver badges40 bronze badges

4 Comments

j08691 Over a year ago

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element. In other words, there's no difference.

CWitty Over a year ago

I know but it is an easier function to add imo.

Karl-André Gagnon Over a year ago

@CWitty then it should be a comment, not an answer :)

CWitty Over a year ago

Sorry new to stackoverflow.

AntouanK · Accepted Answer · 2013-06-26 18:49:44Z

0

works fine with hover

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

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

answered Jun 26, 2013 at 18:49

AntouanK

5,0081 gold badge24 silver badges26 bronze badges

2 Comments

j08691 Over a year ago

As with CWitty's answer, hover is just shorthand for mouseenter and mouseleave.

AntouanK Over a year ago

Yeah I agree, but it's less code. Since he wants to handle both cases here.

Jared Smith · Accepted Answer · 2015-02-12 17:01:09Z

0

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.

answered Feb 12, 2015 at 17:01

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Collectives™ on Stack Overflow

jquery hover only works on click event?

5 Answers 5

7 Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related