Эффект jewery mouseleave через нижнюю границу div

Это делает меня сумасшедшим.

Есть ли способ активировать jewery-эффект mouseleave, только если оставить div через его нижнюю границу?

То есть, предотвращение такого эффекта происходит, если указатель мыши покидает div через любую из трех других границ.

Я предполагаю, что это должна быть какая-то проблема с координатами, но ни позиция, ни смещение не кажутся мне ответом.

Если что-то подобное можно сделать, вам будет очень признателен только один из самых маленьких примеров того, как это сделать.

Если аналогичный вопрос уже задан (и ответил), любые переадресации будут также оценены.

Спасибо!

Ответ 1

Как насчет этого:

$("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/

Ответ 2

Для HTML

<div></div>

и CSS

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

и 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');   
    }
});

или demo, вывод консоли будет происходить только тогда, когда мышь выйдет из нижней части <div>

Ответ 3

Самое простое решение - использовать обертку div и назначить событие mouseleave оболочке.

http://jsfiddle.net/AlienWebguy/TDCgM/

Ответ 4

Быстрое решение заключалось бы в том, чтобы поместить прозрачный абсолют div в нижнюю часть элемента, а затем прослушать mouseenter в этом div, чтобы вызвать mouseleave в родительском div.

Ответ 5

Другое решение, если вы не можете добавить еще один div, - это взять нижние координаты div в вопросе. И проверьте, была ли указатель мыши ниже, чем в событии mouseleave. Возможно, вам придется проверить x1 < xm < x2, где x1 - левая координата x вашего div, а x2 - правильная координата x вашего div, а xm - координата x вашей мыши.

@kingjiv избил меня с помощью кода-примера, но sidechecks могли бы усовершенствовать все это.

Ответ 6

Добавьте условный оператор внутри обработчика mouseLeave, который проверяет, находится ли мышь ниже нижней части элемента. Если это так, мышь, скорее всего, вышла через нижнюю границу.

Пример:

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

});