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

时间:2012-09-09 10:45:13

标签: jquery css hover toggle mouseover

使用简单的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,但不幸的是不会隐藏它。

2 个答案:

答案 0 :(得分:4)

从jQuery 1.8开始,不推荐使用带有hover方法的on事件,您可以编写代码:

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

答案 1 :(得分:1)

试试这个

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

你已经关闭了之前结束时第一个函数的大括号

<强> EDITED

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

DEMO HERE