CODEWITHSUNDEEP
jqueryfademouseenter
Username_null
Username_null

Reputation: 1315

jQuery fadeOut when the mouse is not focused on an item or it's sibling

I have an element with an ID of basket, when moused-over another element is displayed but this element is neither a child or direct sibling of the first. I hope that makes sense.

When I mouse out of the first or second element I would like the second element to fade out but I can't seem to figure out a way of explaining this to Jquery.

Heres the Jquery I'm using:-

$("#basket").mouseenter(function(){
    $("#cartContents").fadeIn("slow");
});
$("#basket").mouseout(function(){
    $("#cartContents").fadeOut("slow");
});

In the second rule I would like to add something like 'only do this bit IF the mouse IS NOT hovering over #cartContents'

Can anyone tell me what I need to do to achieve this/

Thanks in advance

Upvotes: 1

Views: 975

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

You need to add hover checks to your existing code to make it work...

$("#basket").mouseenter(function(){
    $("#cartContents").fadeIn("slow");
});
$("#basket, #cartContents").mouseout(function(){
    if ($("#basket").is(":hover") || $("#cartContents").is(":hover")) return;
    $("#cartContents").fadeOut("slow");
});

It just checks the hover state of both the basket and the cart when you leave either of them and only fades out if you're not over either of them.

Here's a working example...

http://jsfiddle.net/fCxrr/1/

Upvotes: 3

Th0rndike
Th0rndike

Reputation: 3436

The answer to the second question is to unbind the event when the mouse is hovering over cartContents, and re-bind it when the mouse gets out of the cartContents. just look at the bind() and unbind() methods of jquery, and use mouseenter, mouseout, or hover to bind/unbind the events.

Upvotes: 0

Related Questions