在多张图片上鼠标悬停时使用JQuery切换可见性

Question

我在一个简单的jQuery鼠标悬停功能上遇到了问题。

我有许多动态生成的图标，当我悬停时，它们会显示一个隐藏的div，并且当我移开鼠标时，会隐藏该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，但不幸的是无法隐藏它。

- Sideshow

Answer 1

自 jQuery 1.8 版本开始，使用 on 方法的 hover 事件已被弃用，您可以使用以下代码:

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

- Ram

---

太好了 - 感谢您的反馈。现在对我来说已经很好用了 :) - Sideshow

Answer 2

试试这个

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

你之前已经在结尾处关闭了第一个函数的花括号

已编辑

$(document).on({
   mouseover: function() {
       $('.hover_pop').show()
   },
   mouseout: function() {
       $('.hover_pop').hide()
   } 
}, '.lister1 img');​

在此处演示

- kushalbhaktajoshi

---

谢谢指出我的愚蠢错误 :) 但不幸的是，这仍然无法正常工作 - 悬停时不会显示div。我认为我的代码中可能存在其他冲突。 - Sideshow