javascript - T恤图片悬停（根据颜色不同）

Question

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

继承人链接 - http://musclefire.com/26.php

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

ps - 谁钉它并获得完美的代码，我会送出一个免费的发球台给你！

非常感谢！

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/