0

そのため、いくつかのjqueryホバー効果を見ましたが、複数の選択肢をホバーできるものはありません。基本的に、私は 5 つの T シャツの色の選択肢を持っています。それぞれにカーソルを合わせると、現在の (緑の T シャツ) が配置されている場所にポップアップするはずです。

こちらのリンク - http://musclefire.com/26.php

注: このページには他の T シャツ スタイルも含まれているため、適切に機能させるにはコードが多すぎたり複雑すぎたりするかどうかはわかりません。

追伸 - それを成功させ、完璧なコードを手に入れた人には、無料の T シャツをお送りします!

どうもありがとう！

4

2 に答える 2

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);
   });
});
于 2013-03-28T22:04:22.203 に答える
0

私が知っているのは、cssでこれを行うことができないということだけです。したがって、これにはjavascriptまたはjqueryを使用する必要があります。CSS でこれを行う唯一の方法は、影響を受ける要素が子孫または隣接する兄弟のいずれかである場合です。

例えば：

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

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

jqueryでやりたいことができる

ライブデモ: http://jsfiddle.net/XUM8R/

于 2013-03-28T21:59:55.540 に答える