If Mouseover Div Equals False - JQuery / Javascript

Question

I'm trying to get this to work:

if($('#myDiv').hover() == false) {
  myFunction();
}

Not getting much in the way of errors in Chrome or Firebug consoles. I've had a look at some other posts, and there was an answer that used something like:

if($('#myDiv').is(':hover') == false) {
  myFunction();
}

However this also doesn't work.

Here's a jsfiddle if that helps: http://jsfiddle.net/yuwPR/2/

Any ideas greatly appreciated.

Thanks

EDIT:

Thanks for the answers, I wasn't able to get anything working. I'm thinking it might not be possible. Oh well, I'll try something else!

Thanks again

ps Most inventive answer marked as right and upvotes all round.

Answer 1

Without knowing your ultimate intent, you could wire up a hover on the document and check the current target.id

$(document).mouseover(function(event) {
    if (event.target.id == "myDiv") {
        $("body").css("background-color", "red"); //over the div so change the color
        return;
    }
    $("body").css("background-color", "green"); //no on the div
});

code example on jsfiddle .

Answer 2

The hover function takes 2 callback functions:

('#myDiv').hover(function () {
        // function to call when hovering 
    }, 
    function () { 
        myFunction(); 
    }
);

So, when hovering is "false", ie, on mouse out, the second function will be called.

If you're only interested in doing something when the hover stops, you can use the mouseout() function:

$('#myDiv').mouseout(function() {
        myFunction();
    }
);

Answer 3

Your first call could never work:

$('#myDiv').hover()

This actually says "trigger the hover event on the element". It does not check to see if your user is currently hovering over the element.

Your second formulation should work:

$('#myDiv').is(':hover')

This checks to see if the element currently has the mouse hovering over it. However, it doesn't seem to work on document load. An example that works can be seen here . If you can clarify what you're trying to do, it might be possible to find some working code in this style.

Answer 4

This code sample sets up a global js variable to store the hover state of the div. Then I use jquery hover to toggle that between true / false. Then, we just fire off a function every 10ms that checks the hover state. Currently I am just setting the window status telling you if you're hovered or not.

var _MOUSEOVER_IN_PROGRESS = false; //stores the hover state
function isover(){
    if(_MOUSEOVER_IN_PROGRESS){
        window.status = 'Still over!';
    } else {
        window.status = 'You are not hovering on me!';
    }
    setTimeout("isover()",10); //checking every 10ms! 
}



$(document).ready(function(){
    isover();
    $('#mydiv').hover(
        function(){ _MOUSEOVER_IN_PROGRESS = true; }, 
        function(){ _MOUSEOVER_IN_PROGRESS = false; }
    );
});

Edited my code! My mydiv hover catch was not wrapped in a document ready