Эффект на jQuery mouseleave через нижнюю границу див-х

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

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

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

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

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

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

спасибо!

10
effect html jquery mouseleave

6 ответов

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

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

17

для 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');   
    }
});

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

2

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

1

другое решение, если вы не можете добавить другой div, было бы принять нижние координаты Y рассматриваемого div. И проверьте, была ли мышь ниже этого в событии mouseleave. Возможно, вам придется проверить x1

@kingjiv опередил меня с примером кода, но сайдчеки могут уточнить все это.

1

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

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

1

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

пример:

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

});

1