jQuery：div移动不应该的.mouseover（）.mouseout（）

Question

I am new to jQuery, I have this div with an image and text inside: on mouse-over the whole div should move down, and on mouse-leave it should return to its original position. If I trigger the mouse-over on the text it works properly, but if I do the same on the parent div or on the image, the div continues to move up and down.

Here's my HTML:

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

And my Javascript:

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

Answer 1

This should fix things. I've had this problem before. Just use .hover() with 2 functions http://api.jquery.com/hover/ . First function is mouseenter and other function is mouseleave. By using this way you less code and easier to keep up. http://jsfiddle.net/9urkfub2/

$(document).ready(function(){


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

Answer 2

Use this CSS.

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

Example element after applying hover.css effect:

 <a class="button grow">Add to Basket</a>