jquery 改变css不生效问题

Question

《a href="#" class="aaa"》
    <span>讲文明树新风公益广告</span>
    <div class="bbb">
       <div class="ccc">
           <p>美丽浙江 文明相伴</p>
       </div>
    </div>
《/a》

代码如下，

    $(".aaa").mouseover(function() {      if (!$(".bbb").is(":animated")){
        $(".bbb").fadeIn(420).find("div").animate({            "opacity": "show",            "margin-top": 0
          }, 800);
      }
    })

    $(".aaa").mouseleave(function() {
      $(".bbb").fadeOut(400);
      $(".bbb").find("div").css({            "margin-top": "120px",            "opacity": "hide"
          })
    })
    
    
    主要就是mouseleave事件下，看着源代码，鼠标移走时.bbb的margin-top时而生效，
    时而不生效。很是奇怪。不知道有没有朋友也遇到过这种情况，造成这种情况的原因是什么。

Answer 1

mouseover一般和mouseout一起用，mouseenter和mouseleave。区别是mouseover和mouseout事件冒泡，mouseenter和mouseleave不冒泡。冒泡的意思是… 子元素上发生的事件会传递到父元素 再到爷爷元素…一直传到document 。大概就是这样，更详细的解释可以自己去查文档