滚动另一个 div 时 jquery mouseover 再次触发

Question

这可要了我的命！哈哈

我什么都试过了，hover、mouseover、mouseenter...stop(true)

为什么这么难？

我只是将您链接到页面，将大图滚动，然后将鼠标放在按钮下方 - 看看它是如何触发两次的？

我希望那个洞区域停止，直到我的鼠标离开它为止。

http://www.lapiazzaonline.com/owen/index2.html

$(".smerrick").mouseover(function(){
        $(".ssmerrick")
            .animate({bottom:"14px"}, 200).animate({top:"470px"}, 100);

            $(".melville").fadeTo(600, 0.2);
            $(".plainview").fadeTo(600, 0.2);
    });
    $(".smerrick").mouseout(function(){
        $(".ssmerrick")
            .animate({bottom:"14px"}, 200).animate({top:"510px"}, 100);

            $(".melville").fadeTo(0, 1);
            $(".plainview").fadeTo(0, 1);
    });         

我将在此处发布代码，以防 fiddle 不保留代码以供将来参考。 感谢所有的帮助，这个似乎工作 - 但是我没有尝试 anikr 因为这看起来很好。

JAVASCRIPT

<script type="text/javascript">
$(function() {
    $(".views strong").hover(
        function() {
            $(this).find('em').animate({'bottom':'0px'}, 200).end().closest('div').siblings().fadeTo(600, .2);
        },
        function() {
            $(this).find('em').animate({'bottom':'-30px'}, 200).end().closest('div').siblings().fadeTo(0, 1);
        }
    );
});
</script>

HTML

<div class="plainview views" style="opacity: 1; ">
    <div class="logo-plainview"></div>
    <a href="#"><strong><em>Plainview</em></strong></a>
    <p>1137 Old Country Road • Plainview, New York 11803</p>
    <p class="number">(516) 938-0800</p>
</div>



<div class="merrick views" style="opacity: 1; ">
    <div class="logo-merrick"></div>
    <a href="#"><strong><em>Merrick</em></strong></a>
    <p>2191 Merrick Road • Merrick, New York 11566</p>
    <p class="number">(516) 546-2500</p>            
</div>

CSS

.plainview {
    width:316px;
    position:absolute;
    top:0;
    left:0;
}
.logo-plainview {
    background:url(http://www.lapiazzaonline.com/owen/images/logo-plainview.png) no-repeat;
    height:124px;
    width:289px;
    position:absolute;
    top:18px;
    left:15px;
}
.plainview strong {
    background:url(http://www.lapiazzaonline.com/owen/images/plainview.jpg) no-repeat;
    height:474px;
    width:316px;
    position:absolute;
    top:166px;
    left:0;
    display: block;
}
.plainview strong em {
    background:url(http://www.lapiazzaonline.com/owen/images/s-plainview.png) no-repeat;
    height:164px;
    width:233px;
    position:absolute;
    bottom: -30px;
    left:43px;
    display: block;
    text-indent: -9999px;
}
.plainview p{
    width:316px;
    position:absolute;
    top:675px;
    left:0;
    text-align:center;
    color:#CCC;
    font-size:11px;
}

Answer 1

我非常喜欢您的网站，并对其进行了一些修改。 :) Here is jsFiddle

如您所见，我将很多东西组合在一起。稍微改了一下CSS，就是最后的结果了。

你的问题是什么？因为smerrick 不包含ssmerrick，当您将鼠标悬停在ssmerrick 上时，它会自动退出smerrick 并触发mouseout 函数。基本上我将ssmerrick 放在smerrick 中并相应地更改了CSS。

Answer 2

试试：

$(".smerrick").mouseover(function(){ $(这个) .animate({bottom:"14px"}, 200).animate({top:"470px"}, 100); $(".melville").fadeTo(600, 0.2); $(".plainview").fadeTo(600, 0.2); }); $(".smerrick").mouseout(function(){ $(这个) .animate({bottom:"14px"}, 200).animate({top:"510px"}, 100); $(".melville").fadeTo(0, 1); $(".plainview").fadeTo(0, 1); }); //并做相应的事情

希望对你有帮助

Answer 3

我看到了您的 HTML 代码。仅当您将鼠标悬停在小图像上然后移出时，才会触发该事件两次。在这种情况下，较大的图像（应用了事件）会悬停两次，从而产生两个动画。

可以修改 HTML

<a href="#">
     <div class="smerrick"></div>
     <div class="ssmerrick"></div>
</a>

到

<a href="#">
     <div class="smerrick"></div>
     <div class="ssmerrick" ></div>
     <div class="smerrick2"></div>
</a>

您可以使用相当于

的 css 覆盖所有三个商店

.smerrick2 {
    left: 0;
    height : 474px;
    position: absolute;
    top: 166px;
    width: 316px;
    z-index: 999;
}

并将鼠标绑定到该覆盖 div 上并将鼠标移出。这个想法是当您从小图像移出时，您再次将鼠标悬停在较大的图像上，因此事件会触发两次。所以这样就可以停止了。

$(".smerrick2").unbind('mouseover').bind('mouseover', function(){

        $(".ssmerrick").animate({bottom:"14px"}, 200).animate({top:"470px"}, 100);
        $(".melville").fadeTo(600, 0.2);
        $(".plainview").fadeTo(600, 0.2);

}).unbind('mouseout').bind('mouseout', function(){

        $(".ssmerrick").animate({bottom:"14px"}, 200).animate({top:"510px"}, 100);
        $(".melville").fadeTo(0, 1);
        $(".plainview").fadeTo(0, 1);

});

看看这是否适合你。

谢谢