Jquery mouseleave effect through div's bottom border

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/

Answer 2

For HTML

<div></div>

and CSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

and JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

or demo, a Console output will occur only when mouse leaves the bottom of the <div>

Answer 3

The quick solution would be to put a transparent div absolute positioned to the bottom of the element and then listen for a mouseenter on that div to trigger the mouseleave on the parent div.

Answer 4

Another solution if you can't add another div would be to take the bottom y coordinates of the div in question. And check to see if the mouse was below that in the mouseleave event. You might have to check x1 < xm < x2, where x1 is the left x coordinate of your div and x2 is the right x coordinate of your div and xm is the x coordinate of your mouse.

@kingjiv beat me to it with a code-example, but the sidechecks might refine the whole thing.