JQuery 在多个图像的鼠标悬停时切换可见性

Question

简单的 jquery 鼠标悬停函数有问题。

我有一些动态生成的图标，当我悬停它们时会显示一个隐藏的 div，当我 mouesout 时会隐藏该 div。

 <div class='lister1'>
   <img src='"+path+stat1+"' />
   <img src='"+path+stat2+"' />
   <img src='"+path+stat3+"' />
   <img src='"+path+stat4+"' />
   <img src='"+path+stat5+"' />
   <img src='"+path+stat6+"' />
 </div>

JQuery:

$('.hover_pop').hide();

$(document).on('hover','.lister1 img', function(){
$('.hover_pop').show(), function(){
    $('.hover_pop').hide();
}
});

这将显示 div 但不幸的是不会隐藏它。

Answer 1

从 jQuery 1.8 开始，使用 hover 事件和 on 方法已被弃用，您可以编写代码:

$(document).on({
   mouseenter: function() {
       $('.hover_pop').show()
   },
   mouseleave: function() {
       $('.hover_pop').hide()
   } 
}, '.lister1 img');