Question

我尝试在我的网站侧面制作某种菜单，其中显示菜单的一小部分，当您将鼠标悬停在菜单上时，它会滑出以便您点击它。菜单的其余部分位于主网站div下方，问题是当您将鼠标悬停在主网站下方的div上时，您仍然会激活不应发生的动画。

<body>
    <div id="container">
        <div id="header">
            <img id="headerimg" src="pokebalicon.png" />
       </div>
       <div class="sidediv" id="first" style="margin-top: 100px;">
           <p></p>
       </div>
       <div id="mainpage">
           text
       </div>
    </div>
</body>

CSS

#container {
    width: 820px;
    height: 700px;
    margin: 100px auto;
    position: relative;
}
#header {
    padding: 10px;
    height: 100px;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
}
#mainpage {
    height: 600px;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #D5D4D4;
    position: absolute;
    pointer-events: none;
}
.sidediv{
    position: absolute;
    left: 721px;
    top: 80px;
    height: 40px;
    width: 170px;
    text-align: center;
    margin-top: 50px;
    border-radius: 0 5px 5px 0;
    background-image: url(wood.png);
    background-size: cover;
}

和我的JQuery

$(document).ready(function(){
    $('#first').mouseenter(function() {
        $('#first').animate({
            left:'841px'
        });
    });
    $('#first').mouseleave(function() {
        $('#first').animate({
            left:'721px'
        });
    });
});

任何人都知道如何解决我的问题？澄清一下，这里有一些图片

View of the menu http://imgur.com/q8dq7n7 当我将鼠标悬停在菜单上时会发生这种情况 View of the menu while hovering over it http://imgur.com/FvDCa4E 菜单位于白色div下方，但当悬停在白色div和菜单上时，它会启动动画并尝试滑出不应发生的动画。

Answer 1

您必须更改您的双面结构。基本上，你必须有一个鼠标悬停的元素，让我们调用它.arrowide和一个你的内容，我们将你的sideiv作为父母。

<div id="container">
    <div id="header">
        <img id="headerimg" src="https://g.twimg.com/about/feature-corporate/image/typography.png" />
   </div>

    <div id="mainpage">
       text
   </div>

   <div class="sidediv" style="margin-top: 100px;">
       <span class="consentside"> asdas </span>
       <span class="arrowside">  > > > </span>
   </div>
    <div class="sidediv" style="margin-top: 150px;">
       <span class="consentside"> 4234234 </span>
       <span class="arrowside">  > > > </span>
   </div>

</div>

我还添加了一点css

.arrowside{
   float : right;
}

最后你的JQuery，我做了一个self = this，所以父元素不会丢失。这是它的工作原理;所以我们想要的每一个，比如菜单项，有3个元素，一个是菜单的提示，另一个是内容，显然我们有父div。基本上，鼠标进入菜单的一点点，菜单然后将移出，现在菜单返回我们需要将鼠标移出父div。

$('.sidediv').each(function(){
    var self = this;
     $(self).find('.arrowside').mouseenter(function(){
    $(self).stop().animate({width: '390px'}, 1000);
});
    $(self).mouseleave(function(){
        $(self).stop().animate({width: '170'}, 1000)
    });

});

这里是JSFiddle。

当另一个div放在它上面时，如何在div上取消JQuery动画

1 个答案: