javascript - 鼠标悬停时淡入淡出 jquery

Question

我有三个带有默认 Logo 的部分...左、中、右...将鼠标悬停在所有部分上都会用各自的 Logo 一一更改。

当我将鼠标悬停在左侧部分时，它的 Logo 发生了变化，但问题是当我将鼠标悬停在左侧部分的 Logo 上时，它变成了默认部分(意味着左侧部分与其 Logo 一起消失了)，我不知道不想。

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

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 上添加悬停效果。

例如

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

顺便说一句，您还应该调整悬停功能以清除动画队列。如果您将鼠标快速移至各个部分上并移开几次，您会看到有许多动画排队，然后所有动画都继续运行，直到完成。 $.clearQueue() 应该可以解决问题。