鼠標懸停的fadein fadeout jquery

Question

我有三個帶有默認徽標的部分......左，中，右......所有部分的鼠標都是逐個改變的，各有一個標識。

當我鼠標懸停在左側部分時，它已經更改了它的徽標，但問題是當我將鼠標懸停在左側部分上時，它變成默認部分（意味着左側部分隨着其徽標消失）我不想要。

當鼠標懸停在左側部分標識時，我需要鼠標效果將關閉，同樣的事情將適用於其他兩個部分..

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

Answer 1

您需要在類徽標中間添加懸停效果。

例如

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

順便說一句，您還應調整懸停功能以清除動畫隊列。 如果您快速地將這些部分快速鼠標移動幾次，您會看到有許多動畫排隊等候，然后所有動畫都會繼續運行直到完成。 $ .clearQueue（）應該可以解決問題。

Answer 2

我不確定這是否是你需要的，但我對你的標記和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();
});

你可以在這里查看更新的小提琴