javascript - jQuery:不应该移动的 div .mouseover() .mouseout()

Question

我是 jQuery 的新手，我有一个包含图像和文本的 div:鼠标悬停在整个 div 上应该向下移动，鼠标离开时它应该返回到原来的位置。如果我在文本上触发鼠标悬停，它会正常工作，但如果我在父 div 或图像上执行相同操作，div 会继续上下移动。

这是我的 HTML:

<div id="sidebar">
   <a href="/">
      <img src="//path" width="150" style="margin-bottom:5px;" />
   </a>
   <div id="mydesc"></div> 
</div>

还有我的 Javascript:

  $('#sidebar').mouseover(function(){
      $('#mydesc').animate({
        'marginTop':"30"
      });
   });
   $('#sidebar').mouseout(function(){
      $('#mydesc').animate({
        'marginTop':"0"
      });
   });

Answer 1

这应该可以解决问题。我以前遇到过这个问题。只需将 .hover() 与 2 个函数一起使用 http://api.jquery.com/hover/ .第一个函数是 mouseenter，另一个函数是 mouseleave。通过使用这种方式，您可以减少代码并且更容易跟上。 http://jsfiddle.net/9urkfub2/

$(document).ready(function(){


    $("#sidebar").hover(
        function(){
             $('#mydesc').animate({
                'marginTop':"30"
            });
        }, function(){
            $('#mydesc').animate({
                'marginTop':"0"
            });
        });
    });