JQuery: if mouseleave = true, then DO THIS

Question

A simple question: how could I execute this function in jQuery: Check if the mouse is hovering over .myBox

  if ($(".myBox").mouseleave = true) { DO SOMETHING } else {something else} 

OR

  if ($(".myBox").mouseover = false) { DO SOMETHING } else {Something else} 

NOTE: im looking for IF statement

Answer 1

jQuery provides an is method for checking conditions against a jQuery object. In your case, you can check the class pseudo-class :hover CSS:

 $('.myBox').is(':hover') === true 

Take a look at this demo, try clicking the button (which will warn true ), and the tab and clicking will be entered on the button (without a mouse, it will return false ).

DEMO: http://jsfiddle.net/marcuswhybrow/LL5JD/

Answer 2

Take a look at jQuery Mouse Over

 $(".my_box").mouseover(function(){ // Mouse over... }); $(".my_box").mouseout(function(){ // Mouse left... }); 

Here is an example that adds a border to the image when it hangs over it and removes it after x the amount of time if it was not re-hanging: See here for work

 var hover_off = false; var hover_count = 1000; $(".my_box").mouseover(function() { hover_off = false; $(this).addClass('hovering'); }); $(".my_box").mouseout(function() { hover_off = true; setTimeout(myMouseOut, hover_count); }); function myMouseOut() { if (hover_off) { $(".my_box").removeClass('hovering'); } } 

Answer 3

That's right, $ ('. MyBox'). is (': hover') used with jQuery 1.5.1 throws an error, but in my tests only in Opera Browser (11.01): Unexposed exception: syntax error, unrecognized expression: hover

The workaround uses a negative expression : $ ('. MyBox'). is ('not (: hover)') This works fine when my tests are in Opera 11, FF4, IE7, Chrome 5.

Answer 4

Use .hover () http://api.jquery.com/hover/

Answer 5

 $(".myBox").hover( function(){ //DO SOMETHING ON MOUSE ENTER }, function(){ //DO SOMETHING ON MOUSE LEAVE } }); 

Answer 6

This did the trick for me:

 var hover = false; $('.someClass').each(function(i,e){ hover = !hover ? $(e).is(':hover') : true; }); if (hover) // do something else // do something else 

Answer 7

use this: http://plugins.jquery.com/project/enterleave-events

 $('.myBox').bind('enter leave',function() { // do something, use $(this) to get the object }); 

Answer 8

Act on mouseenter and mouseleave events.

Or use a hover that can handle both of them.

 $('.myBox').hover( function(e){ //do the mouseenter things here... }, function(e){ //do the mouseleave things here... } ); 

Example http://www.jsfiddle.net/gaby/ECYD4/