jquery在悬停时切换图像答案

【问题标题】：jquery Switch images on hoverjquery在悬停时切换图像
【发布时间】：2012-03-23 15:31:04
【问题描述】：

我有很多带有“缩略图”类的 div，其中包含 5 个这样的图像

<div class='thumbnails'>

    <img src='image1.jpg' />
    <img src='image2.jpg' />
    <img src='image3.jpg' />
    <img src='image4.jpg' />
    <img src='image5.jpg' />

</div>

css:

.thumbnails{ position:relative; }
.thumbnails img{ position:absolute; top:0px; left:0px; }

每个图像都有位置：绝对；所以默认情况下 image1 在顶部

我想做的是

当访问者将鼠标悬停在“缩略图”div 上时，它会显示/切换每个图像“滑块之类的东西”，当鼠标移出时，它会返回到默认图像 (image1)，对于每个“缩略图”div，依此类推

所有帮助将不胜感激

【问题讨论】：

Yusuf 说：我没有图片名称，它会从数据库中获取结果每个产品都有自己的图片
在我看来，这就像一个带有图像列表的散列。每个产品都有一个图像列表。将视图与该数据结构链接并仅根据键显示，在这种情况下，键是产品 ID 或唯一的东西。我无法为您提供语法帮助，因为我不知道您在使用什么。
与 JQuery 的不同方式 stackoverflow.com/questions/4265485/…
问题很简单，我有一个 div，里面有 5 张图片，但只显示 1 张，因为图片有 position:absolute;我想要的是当用户将鼠标悬停在顶部图像或缩略图 div 上时，它会稍微显示其他图像，当用户将鼠标移开时，它会返回默认图像

标签： jquery image slider switch-statement show

【解决方案1】：

看起来您想在 #thumbnails 上绑定一个 .mouseenter() 事件，该事件调用使用 .animate() 的函数。然后该函数可以运行动画，然后完成（'#image'+counter），然后再次运行该函数。（你也可以创建一个 setInterval 让它工作而不是完成）只要设置一个检测 .mouseleave() 的变量来停止由 .mouseenter() 启动的动画链

文档：

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

http://api.jquery.com/animate/

【讨论】：