检测鼠标是否在元素上

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
}

Answer 1

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.

Answer 2

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
}

Answer 3

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
}