Question

我有三个带有默认徽标的部分...左，中，右......所有部分的鼠标都是逐个改变，各自有徽标。

当我鼠标悬停在左侧部分时，它已经更改了它的徽标，但问题是当我将鼠标悬停在左侧部分上的徽标时，它变成默认部分（意味着左侧部分随其徽标消失）我不知道#39; t想要。

当鼠标悬停在左侧部分标识上时，我需要将鼠标效果关闭，同样的事情将适用于其他两个部分..

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

您需要在徽标中间添加悬停效果。

e.g。

$(".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();
});

您可以查看 updated fiddle here

鼠标悬停的fadein fadeout jquery

2 个答案: