0

我有三个带有默认徽标的部分……左、中和右……鼠标悬停在所有部分上，都用各自的徽标一一更改。

当我将鼠标悬停在左侧部分时，它的徽标已更改，但问题是当我将鼠标悬停在左侧部分的徽标上时，它变成了我不想要的默认部分（意味着左侧部分与其徽标一起消失） .

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

的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

You need to add a hover effect on the class logo-middle.

e.g.

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

By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.

于 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 回答