Question

This is making me crazy.

Is there a way to fire a mouseleave jquery effect only if leaving the div through its bottom border?

That is, preventing said effect from taking place if the mouse pointer leaves the div through any of the other 3 borders.

I guess it must be a coordinates issue of some sort, but neither position not offset seem like the answer to me.

If something like that can be done, just the tiniest of examples on how to do it would be greatly appreciated.

If a similar question has already been asked (and answered) any redirections will be appreciated as well.

Thanks!

Answer 1

How about this:

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/