Javascript jQuery的悬停行为问题

我有以下jQuery事件绑定。请参阅下图以查看DOM。将鼠标悬停在

.gift price

、

gift vendor

和

gift name

上时，悬停回调行为正常。但是，当将鼠标悬停在图像上（

.gift photo

）时，

mouseenter

和

mouseleave

会为鼠标的每次移动调用回调。为什么会这样？谢谢

$('div.gift-gallery-item').hover(
    function(e) {
        var offset = $(this).offset();
        var itemWidth = $(this).width();
        var itemHeight = $(this).height();

        var hoverItem = $('div#gift-gallery-item-hover');
        hoverItem.height(140).width(itemWidth * 2);
        hoverItem.css('left', offset.left).css('top', offset.top);
        hoverItem.show();

        console.log('in: ' + offset.left +', '+ offset.top);
        console.log(this);
    },
    function(e) {
        $('div#gift-gallery-item-hover').hide();
        console.log('out!');
    } 
)

DOM参考图像 黄色框为

。礼品库项目

div

---

解决了我自己的问题。基本上，hover的行为是正确的，但当绝对定位的hover info div位于鼠标下方时，就会触发礼品库项目上的mouseleave事件。简单的解决方案是将悬停拆分为mouseenter和mouseleave事件，并使用

one（）

而不是

bind（）

仅绑定mouseleave一次。然后在hover info div的mouseleave事件中，我将mouseleave重新绑定到礼品库项目上

$('div.gift-gallery-item').bind('mouseenter', function(e) {
    var offset = $(this).offset();
    var itemWidth = $(this).width();
    var itemHeight = $(this).height();

    var hoverItem = $('div#gift-gallery-item-hover');
    hoverItem.height(140).width(itemWidth * 2);
    hoverItem.css('left', offset.left).css('top', offset.top);
    hoverItem.show();

    console.log('in: ' + offset.left +', '+ offset.top);
    console.log(this);
});

$('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);

var mouseLeaveEvent = function() {
    $('div#gift-gallery-item-hover').hide();
    console.log('out!');
};

$('div#gift-gallery-item-hover').hover(
    function(e) {

    },
    function(e) {
        $('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);
    }
);

---

解决了我自己的问题。基本上，hover的行为是正确的，但当绝对定位的hover info div位于鼠标下方时，就会触发礼品库项目上的mouseleave事件。简单的解决方案是将悬停拆分为mouseenter和mouseleave事件，并使用

one（）

而不是

bind（）

仅绑定mouseleave一次。然后在hover info div的mouseleave事件中，我将mouseleave重新绑定到礼品库项目上

$('div.gift-gallery-item').bind('mouseenter', function(e) {
    var offset = $(this).offset();
    var itemWidth = $(this).width();
    var itemHeight = $(this).height();

    var hoverItem = $('div#gift-gallery-item-hover');
    hoverItem.height(140).width(itemWidth * 2);
    hoverItem.css('left', offset.left).css('top', offset.top);
    hoverItem.show();

    console.log('in: ' + offset.left +', '+ offset.top);
    console.log(this);
});

$('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);

var mouseLeaveEvent = function() {
    $('div#gift-gallery-item-hover').hide();
    console.log('out!');
};

$('div#gift-gallery-item-hover').hover(
    function(e) {

    },
    function(e) {
        $('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);
    }
);

---

我相信这与悬停div（绝对定位）干扰鼠标有关：我相信这与悬停div（绝对定位）干扰鼠标有关：