我有跟随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!');
}
)
黄色方框是.gift-gallery-item
个div
答案 0 :(得分:0)
解决了我自己的问题。基本上悬停行为正常,但当绝对定位的悬停信息div在鼠标下时,mouseleave事件被触发在gift-gallery-item上。简单的解决方案是将悬停分解为其mouseenter和mouseleave事件,并使用one()
而不是bind()
仅绑定mouseleave一次。然后在hover info div的mouseleave事件中,我重新绑定了gift-gallery-item上的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);
}
);