I have the follow jQuery event binding. Refer to the image below to see the DOM. The hover callbacks behave correctly when hovering over `.gift-price`, `.gift-vendor`, and `.gift-name`. However, when hovering over the image (`.gift-photo`), the `mouseenter` and `mouseleave` callbacks are called for every movement of the mouse. Why is this happening? Thanks!
$('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 Reference Image
The yellow boxes are `.gift-gallery-item` divs
以上就是Hover behaviour issue with jQuery的详细内容，更多请关注web前端其它相关文章！
