CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseevent
user1257724
user1257724

Reputation:

JQuery Mouse Events: How to trigger a callback if the element moves?

I have the following source:

$("body").on('mouseenter', '.tile-2', function () {
  $(".tile-explanation-embarklogo").fadeIn(400)
}).on('mouseleave', '.tile-2', function () {
  $(".tile-explanation-embarklogo").fadeOut("200")
});

When the cursor hovers over the element with class tile-2, a reveal a hidden div. Accordingly, when the cursor hovers off the element, I hide the div once again.

The problem is that there are times when the the tile-2 element moves on its own and even disappears (user input can move the tile-2 element). This is problematic because the cursor never hovers off the element itself and I am unable to hide the div. It stays forever, without being able to remove it.

How can I also call:

$(".tile-explanation-embarklogo").fadeOut("200")

when the tile itself moves away from the cursor?

Upvotes: 0

Views: 103

Answers (2)

Marco
Marco

Reputation: 86

You can try the hover event also, leaving jquery do th job for you:

$('.tile-2').hover(function () {
    $(".tile-explanation-embarklogo").fadeIn(400)
}, function () {
    $(".tile-explanation-embarklogo").fadeOut("200")
});

Upvotes: 0

Matt Whitehead
Matt Whitehead

Reputation: 1801

I'm not sure why you have your listener on the body tag but try this out:

$('.tile-2').on('mouseenter', function() 
{
    $('.tile-explanation-embarklogo').fadeIn(400);
});

$('.tile-2').on('mouseleave', function() 
{
    $('.tile-explanation-embarklogo').fadeOut(200);
});

Upvotes: 1

Related Questions