javascript - JS 鼠标悬停功能在我悬停特定 div 时不重置

Question

我有一个正在运行的小动画，但不是我想要的，当我悬停其中一个三 Angular 形时它会带来一个隐藏的 div，我希望动画在我悬停三 Angular 形或隐藏的时不重置div，希望能让我明白。

动画如下:

$(function() {
    $('.arrow-left').mouseover(function() {    
        $('body').stop( true, true ).css('right', 'auto').animate({
            left: 300
        });
        $('#left-content').show();
    });
    $('.arrow-left').mouseleave(function() {
        $('body').stop( true, true ).css('right', 'auto').animate({
            left: 0
        });
        $('#left-content').hide();
    });
    
    $('.arrow-right').mouseover(function() {    
        $('body').stop( true, true ).css('left', 'auto').animate({
                right: 300
            });
        $('#right-content').show();
    });
    $('.arrow-right').mouseleave(function() {
        $('body').stop( true, true ).css('left', 'auto').animate({
            	right: 0
			});
        $('#right-content').hide();
    });
});

#anim {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/rxks29H.jpg");
  background-image: no-repeat;
  background-size: 100%;
}
#anim img {
  position: relative;
  height: 100%;
  width: 100%;
}
.arrow-left {
  padding: 5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  left: 0;
  z-index: 3;
  top: 30%;
    cursor: pointer;
}
.arrow-right {
  padding: 5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  right: 0;
  z-index: 3;
  top: 30%;
    cursor: pointer;
}
.arrow-right h2 {
  font-size: 28px;
  color: #FFF;
}
.arrow-right:hover h2, .arrow-left:hover h2 {
    color: #DDD;
    text-decoration: underline;
}
.arrow-left h2 {
  font-size: 28px;
  color: #FFF;
}
body {
    position: relative;
}

.hide {
    display: none;
}

#left-content {
    left: -300px;
    height: 400px;
    position: absolute;
    top: -30%;
    width: 300px;
}

#right-content {
    right: -320px;
    height: 400px;
    position: absolute;
    top: -30%;
    width: 300px;
}

<section id="anim">
  <img src="http://i.stack.imgur.com/Fbhc4.png">
  <div class="arrow-right">
    <h2>Scouting For Companies</h2>
      <div id="right-content" class="hide">
          <h3>Right content</h3>
          <p>A paragraph goes here A paragraph goes here</p>
          <p>A paragraph goes here A paragraph goes here</p>
          <p>A paragraph goes here A paragraph goes here</p>
      </div>
  </div>
  <div class="arrow-left">
    <h2>Seeking For Ideas</h2>
      <div id="left-content" class="hide">
          <h3>Left content</h3>
          <p>A paragraph goes here A paragraph goes here</p>
          <p>A paragraph goes here A paragraph goes here</p>
          <p>A paragraph goes here A paragraph goes here</p>
      </div>
  </div>
</section>

Fiddle

fiddle 感谢@amir5000

编辑:似乎在 jsfiddle 上的行为与在本地文件上的行为不同，如果我每次移动鼠标时打开 index.html，动画都会重置。

Answer 1

使用 mouseenter事件而不是鼠标悬停。

$(function() {
    $('.arrow-left').mouseenter(function() {
        // ...
    });
});

JSFiddle example