将鼠标悬停在fadein-fadeout jquery上

fadein fadeout jquery on mouse-over

本文关键字：jquery fadein-fadeout 鼠标 悬停      更新时间：2023-09-26

我有三个带有默认徽标的部分。。。左、中、右。。在鼠标上，所有部分都在一个接一个地更改，并带有各自的徽标。

当我把鼠标悬停在左侧部分时，它的徽标发生了变化，但问题是当我把光标悬停在左侧的徽标上时，它变成了我不想要的默认部分（意味着左侧部分和它的徽标一起消失了）。

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

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

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

例如

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

顺便说一下，您还应该调整悬停功能以清除动画队列。如果你快速地在这些部分上来回移动几次，你会看到有很多动画排队，然后所有动画都继续运行，直到它们完成。$。clearQueues（）应该可以做到这一点。

我不确定这是否是你所需要的，但我对你的标记和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();
});

您可以在此处查看更新的fiddle

相关文章：