T恤图片悬停（根据颜色不同）答案

【问题标题】：T-shirt image hover (based on different colors)T恤图片悬停（根据颜色不同）
【发布时间】：2013-03-28 21:40:06
【问题描述】：

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

这里的链接 - http://musclefire.com/26.php

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

附言- 谁钉了它并获得了完美的代码，我会送你一个免费的 T 恤给你！

非常感谢！

【问题讨论】：

免费T恤？哇哦！

标签： javascript jquery image hover

【解决方案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);
   });
});

【讨论】：

如果您想要其中一件衬衫，请给我发送电子邮件！ ryan@musclefire.com
完成了。另外，如果这个答案有帮助，请标记它！谢谢。

【解决方案2】：

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

例如：

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

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

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

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

【讨论】：