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

Posted 2023-05-08

【中文标题】JQuery在多个图像的鼠标悬停时切换可见性

【英文标题】：JQuery toggle visibility on mouseover of multiple images

【发布时间】：2012-09-02 12:51:18

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

太好了 - 感谢您的意见。这对我来说现在很好:)

【参考方案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');​

DEMO HERE

【讨论】：

感谢您指出我的愚蠢错误 :) 但不幸的是这仍然不起作用 - 现在不显示悬停时的 div。我认为我的代码中的其他地方可能存在冲突