Question

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

Answer 1

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.