CODEWITHSUNDEEP
jquery
user1021567
user1021567

Reputation: 31

jQuery - Show div depending on mouse position

OK, I'm totally stuck...

I have an image inside a hidden div. I want to only show the image if the mouse's x-coordinates are between 0 and 200 px.

So basically:

if pageX <= 200 {
 show div 
} else {
 hide div
}

Any advice would be so greatly appreciated!

Upvotes: 0

Views: 701

Answers (2)

Pedram Behroozi
Pedram Behroozi

Reputation: 2497

You can also use toggle():

$(document).mousemove(function(e){
    $('div').toggle(e.pageX < 200);

Upvotes: 0

Teneff
Teneff

Reputation: 32158

First you have to get mouse position and then check if it's less than 200:

$(document).mousemove(function(e){
    if (e.pageX < 200) {
        $('div').show();
    }
    else {
        $('div').hide();
    }
}

edit: I'm not checking if it's bigger than zero, because if the mouse is outside the window the handler function will not be triggered

jQuery's Tutorial: Mouse Position

Upvotes: 2

Related Questions