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

Solution 1

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/

Solution 2

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

Solution 3

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.

Solution 4

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

Solution 5

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

View more solutions

Comments

[Gabriele Petrioli]

why use a plugin for mouseenter and mouseleave events ? they are supported internally with bind('mouseenter mouseleave', ...

[android.nick]

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.

[Marcus Whybrow]

Tested in Chrome, just tested in FF and it wasn't working... investigating.

[Marcus Whybrow]

It seems to be a bug in jQuery: uncaught exception: Syntax error, unrecognized expression: Syntax error, unrecognized expression: hover

[Scoobler]

@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

[android.nick]

did you report the bug? because what you provided is exactly what I wanted, gahhhh bugs!

[Luis]

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.

[TheVillageIdiot]

Well said @Luis as for chrome autofill fiascos, someone said that wrapping text inputs in <form> tags stop it. I tried it and it works!