T恤图像悬停（基于不同的颜色）

Question

所以我见过一些jquery悬停效果，但没有一个可以做多个选择悬停。 基本上我有5个T恤颜色选择，当每个颜色都悬停在它上面时，它应该弹出当前（绿色T恤）所在的位置。

Heres链接 - http://musclefire.com/26.php

注意：此页面上还会有其他T恤样式，因此不确定这是否会使代码/复杂程度过高而无法正常工作。

P.S。 - 无论谁钉它并获得完美的代码，我都会发送一个免费的发球台给你！

非常感谢！

Answer 1

我很确定这就是你要找的东西：

  

演示：http://plnkr.co/edit/jiNxcw9nHQD5gV4vvwlj?p=preview

HTML

<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>

CSS

#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;
}

的jQuery

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

Answer 2

我知道你不能用css做到这一点。因此，您应该使用 javascript 或 jquery 。 使用CSS执行此操作的唯一方法是，要影响的元素是后代还是相邻的兄弟。

例如：

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

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

你可以用jquery做你想做的事，

现场演示：http://jsfiddle.net/XUM8R/