Jquery: if mouseleave = true then DO THIS

Question

Simple question, how would I accomplish this functionality in Jquery: Test whether 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 an IF statement

score 10 · Accepted Answer · answered Jan 28 '11 at 16:55

10

jQuery provides the is method for checking conditions with regard to a jQuery object. In your case you can check for the :hover CSS pseudo class:

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

Havre a look at this demo, try clicking the button (which will alert true) and the tabbing to and hitting enter on the button (without the mouse, it will return false).

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

answered Jan 28 '11 at 16:55

Marcus Whybrow

19,578
9
70
90

Tested in Chrome, just tested in FF and it wasn't working... *investigating*. – Marcus Whybrow Jan 28 '11 at 17:39
It seems to be a bug in jQuery: `uncaught exception: Syntax error, unrecognized expression: Syntax error, unrecognized expression: hover` – Marcus Whybrow Jan 28 '11 at 17:42
did you report the bug? because what you provided is exactly what I wanted, gahhhh bugs! – android.nick Feb 01 '11 at 18:30

Scoobler · Answer 2 · 2011-01-28T17:47:09.113

Take a look at jQuery Mouse Over

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

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

Here is an example, adding a border to an image when hovering over it, and removing it after x amount of time if its not been re-hovered: See it working here

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');
    }
}

score 2 · Answer 3 · answered Apr 15 '11 at 05:48

That's right, $('.myBox').is(':hover') used with jQuery 1.5.1 throws the error, but in my tests only in Opera Browser (11.01): Uncaught exception: Syntax error, unrecognized expression: hover

A workaround is using a negated expression: $('.myBox').is('not(:hover)') That worked fine while my tests in Opera 11, FF4, IE7, Chrome 5.

score 1 · Answer 4 · answered Aug 07 '12 at 14:30

1

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

answered Aug 07 '12 at 14:30

Robert Schmidt

11
1

score 1 · Answer 5 · answered Jan 28 '11 at 16:51

1

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

answered Jan 28 '11 at 16:51

CrayonViolent

32,111
5
56
79

score 1 · Answer 6 · answered Jan 28 '11 at 16:56

1

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

answered Jan 28 '11 at 16:56

TheVillageIdiot

40,053
20
133
188

1

Actually this is unbelievably useful. This structure acts as an else clause where ifs cannot be used, for example, when you cannot (coincidentally) use `.hover` with an if because you are struggling with chrome's autocomplete in a pop up login form. If you use `.hover` you will surely get undesired behaviour, instead when you use `$("#foo").mouseout(function(){#The Code},function(){});` you have no problems at all. Thank you. – Luis May 05 '17 at 02:49
Well said @Luis as for chrome autofill fiascos, someone said that wrapping text inputs in `
` tags stop it. I tried it and it works!
– TheVillageIdiot May 05 '17 at 02:51

score 0 · Answer 7 · answered Jan 28 '11 at 16:53

0

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

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

answered Jan 28 '11 at 16:53

Syl

2,733
2
17
20

why use a plugin for `mouseenter` and `mouseleave` events ? they are supported internally with `bind('mouseenter mouseleave', ...` – Gabriele Petrioli Jan 28 '11 at 16:58

Gabriele Petrioli · Answer 8 · 2011-01-28T16:59:28.317

0

Act on the mouseenter and mouseleave events.

Or use the hover which can handle both of them..

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

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

edited Jan 28 '11 at 16:59

answered Jan 28 '11 at 16:53

Gabriele Petrioli

191,379
34
261
317

im trying to create a delay when i hover off of something, so it doesn't close right away, but after maybe 3 seconds, but if i hover off, then hover back on, cancel hover off, so if someone accidentally hovers off, it doesn't close right away. – android.nick Jan 28 '11 at 17:07
@android.nick See the update to my question for an example how to adapt Gaby's code to do what you want. jsfiddle.net/Scoobler/ThLqx/12 – Scoobler Jan 28 '11 at 18:25

Jquery: if mouseleave = true then DO THIS

8 Answers8