Detect if the mouse is over an element

Question

How do I get a pretty simple true/false-statement if the mouse is over a div event = true else event = false

  var test = $("#main-nav").on("mouseenter", function (e) {
    e.preventDefault();
    console.log(e.preventDefault());
    return true;
});

if (test === true) {
   //do something
} else {
   //something different
}

Do you want this constantly updating as the user moves the mouse around, or do you need to know once "Is the mouse currently over element `#main-nav`". — Jamiec, Nov 25 '14 at 16:45
http://api.jquery.com/on/ use it like $(document).on('mouseenter', '#main-nav', function(){...}); — Sen Jacob, Nov 25 '14 at 16:48
Answer for vanilla JS https://stackoverflow.com/a/46972433/1205871 — danday74, Aug 02 '22 at 01:41

Mooseman · Accepted Answer · 2014-11-25T16:48:34.390

6

If I understand your question correctly:

if($("#main-nav").is(":hover")) {
   //do something
}else{
   //something different
}

In pseudo code:

if the cursor is over #main-nav
    do something
if it's not
    do something else

If you want test to always be set:

var test = false;
$("#main-nav").on("mouseenter", function(e){
    e.preventDefault();
    test = true;
}).on("mouseleave", function(e){
    e.preventDefault();
    test = false;
});

This way,

if(test === true) {
   //do something
}else{
   //something different
}

will always work.

edited Nov 25 '14 at 16:48

answered Nov 25 '14 at 16:43

Mooseman

18,763
14
70
93

Great answer, Maybe add a section in case OP wants to know how they could have gone about it using their original idea. – theonlygusti Nov 25 '14 at 16:45
@theonlygusti Can you explain what you mean by "gone about it using their original idea."? Thanks. – Mooseman Nov 25 '14 at 16:46
How could you check where the mouse is using mouseenter and leave? – theonlygusti Nov 25 '14 at 16:47

score 0 · Answer 2 · answered Nov 25 '14 at 16:51

You can have a boolean (true/false) variable that will constantly update by doing this:

var hovering;
$("#main-nav").mouseenter(function(){
    hovering = true;
});
$("#main-nav").mouseleave(function(){
    hovering = false;
});

So whenever it is called it will tell you if the mouse is within your div:

if (hovering){
    // mouse within div
} else {
    // mouse not within div
}

score 0 · Answer 3 · answered Nov 25 '14 at 16:52

If you necessarily need is as a variable:

var test = false;
$("#main-nav").on("mouseenter", function (e) {
    test = true;
});
$("#main-nav").on("mouseout", function (e) {
    test = false;
}); 

//....

if (test === true) {
   //do something
} else {
   //something different
}

Detect if the mouse is over an element

3 Answers3