0

デフォルトのロゴを持つ 3 つのセクションがあります...左、中央、右..すべてのセクションにマウスを合わせると、それぞれのロゴで 1 つずつ変化します。

左のセクションにマウスオーバーすると、ロゴが変更されましたが、問題は、左のセクションのロゴをマウスオーバーすると、デフォルトのセクションに変わります（左のセクションがロゴとともに消えたことを意味します）。 .

左セクションのロゴの上にマウスを移動すると、マウス効果がオフになる必要があります。他の2つのセクションにも同じことが適用されます..

HTML :

<div id="container">
    <div class="logo">
        <img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
    </div>
    <div class="main" id="left">
        <div class="dot1-top">
            <img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
        </div>
        <div class="showhide">
            <div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>            
        </div>
    </div>
    <div class="main"  id="middle">
        <div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
        <div class="showhide2">
            <div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
            </div>            
        </div>           
    </div>
    <div class="main"  id="right">
        <div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
        <div class="showhide3">
            <div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
            </div> 
        </div>     
    </div>
</div>

そして、これがjsfiddleです

4

2 に答える 2

2

クラスのロゴ中央にホバー効果を追加する必要があります。

例えば

$(".logo-middle").hover(function mouseIsOverImage() {
    /* keep the image */
}, function mouseIsOffImage() {
    /* make the image what it was before */
});

ちなみに、アニメーション キューをクリアするには、ホバー機能も調整する必要があります。セクションにマウスを数回すばやく移動すると、多くのアニメーションがキューに入れられ、完了するまですべてが実行され続けることがわかります。$.clearQueue() でうまくいくはずです。

于 2013-07-17T16:26:06.197 に答える
0

これが必要かどうかはわかりませんが、マークアップと CSS を少しクリーンアップして、ホバー効果のこのソリューションを思いつきました

$('.bg').hide();
$('.main').hover(function (){
    $(this).siblings('.main').find('.bg').stop().fadeOut();
    $(this).find('.bg').stop().fadeIn();
    $('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
    $('#logo img').attr('src',$(this).data('logo'));
    $('.main .bg').stop().fadeOut();
});

ここで更新されたフィドルを確認できます

于 2013-07-19T06:49:19.640 に答える