jquery 改变css不生效问题？

Question

代码如下：

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

jquery部分：

 $(".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

jquery Changing css does not take effect? -PHP Chinese website Q&A-jquery css change does not take effect? -PHP Chinese website Q&A

Let’s take a look and learn.

Answer 2

mouseover一般和mouseout一起用，mouseenter和mouseleave。
区别是mouseover和mouseout事件冒泡，mouseenter和mouseleave不冒泡。
冒泡的意思是… 子元素上发生的事件会传递到父元素 再到爷爷元素…一直传到document 。