Javascript T恤图片悬停（基于不同颜色）

因此，我看到了一些jquery悬停效果，但没有一个可以实现多项选择悬停。 基本上，我有5种t恤颜色可供选择，当每种颜色都悬停在上方时，它应该会在当前（绿色t恤）所在的位置弹出

此处链接-

注意：本页还将有其他t恤款式，因此不确定这是否需要太多代码/复杂才能正常工作

p、 不管是谁搞定了它并得到了完美的代码，我都会给你送一个免费的T恤

---

多谢

我只知道你不能用css来做这件事。因此，您应该使用javascript或jquery进行此操作。 使用CSS实现这一点的唯一方法是如果要影响的元素是后代或相邻的兄弟

例如：

.parent:hover .child{}
.child{}

<div class="parent">
    <div class="child"></div>
</div>

.parent:hover.child{}
.child{}

您可以使用jquery做您想做的事情

---

现场演示：

我很确定这就是您想要的：

演示： HTML jQuery

---

免费t恤？呜呼！如果你想要一件衬衫，请给我发电子邮件！ryan@musclefire.comDone完成了。此外，如果这个答案有帮助，请标记它！谢谢

<div id="main">
    <img class="active" src="http://musclefire.com/gear/muskull-green.png" />
    <img src="http://musclefire.com/gear/muskull-red.png" />
    <img src="http://musclefire.com/gear/muskull-blue.png" />
    <img src="http://musclefire.com/gear/muskull-charcoal.png" />
    <img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
<div id="thumbs">
    <img src="http://musclefire.com/gear/muskull-green.png" />
    <img src="http://musclefire.com/gear/muskull-red.png" />
    <img src="http://musclefire.com/gear/muskull-blue.png" />
    <img src="http://musclefire.com/gear/muskull-charcoal.png" />
    <img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>

#main {
    border: solid 1px #eee;
    text-align: center;
}
#thumbs {
    border: solid 1px #eee;
    text-align: center;
}
#main img {
    width: 300px;
    display: none;
}
#main img.active {
    display: inline-block;
}
#thumbs img {
    width: 50px;
    height: auto;
}

$(function(){
   $('#thumbs img').bind('hover', function(){
      var which = $(this).attr('src');
      $("#main img:visible").hide();
      $('#main img[src="' + which +'"]').stop().fadeIn(800);
   });
});