CODEWITHSUNDEEP
javascriptjquery
craphunter
craphunter

Reputation: 981

Detect if the mouse is over an element

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
}

Upvotes: 0

Views: 745

Answers (4)

Whip
Whip

Reputation: 2224

With vanilla js you can check like this

if(element.matches(':hover')){
  // do your thing
}

Upvotes: 0

pbogut
pbogut

Reputation: 877

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
}

Upvotes: 0

user3310334
user3310334

Reputation:

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
}

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

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.

Upvotes: 6

Related Questions