ホバリング時、先頭のpf要素を変更した後trigger mouseleave（）

Question

これは私のHTMLコードです。

<div class="butterfly-container"> 
    <div class="butterfly-circle-border"></div> 
    <div class="butterfly-img"> 
     <img src="assets/img/1.png" /> 
    </div> 
    <div class="butterfly-content"> 
     <h3>The Title</h3> 
     <p>This is a descripton for this title and more ...</p> 
    </div> 
</div> 

そして、ここに私のJavascriptを/ jQueryのコードです：

$(function(){ 

$(".butterfly-circle-border").bind({ 
    mouseenter:function(){ 
     $(this).next(".butterfly-img").addClass("butterfly-img-down"); 
     $(this).next(".butterfly-img").next(".butterfly-content").addClass("butterfly-content-top"); 
    }, 
    mouseleave:function(){ 
     $(this).next(".butterfly-img").removeClass("butterfly-img-down"); 
     $(this).next(".butterfly-img").next(".butterfly-content").removeClass("butterfly-content-top"); 
    } 
}); 

}); 

私の問題は）私のマウスは、サークルに他のdivの変更のトップを入力し、それが（mouseleaveをトリガーする場合です。そして、それは私の期待どおりに動作しません。私はホバリングする必要がありますイメージがダウンし、コンテンツが上に行くと、それはviseversa行くmouseleaveに行く。私は何をすべきか？ デモ用のリンクはこちらhttp://design.atousadarabi.ir/mouseovereffect/BlueButterfly/

Answer 1

これは私の新しいスクリプトです：

$(".butterfly-container").bind({ 
    mouseenter:function(){ 
     $(this).children(".butterfly-img").addClass("butterfly-img-down"); 
     $(this).children(".butterfly-img").next(".butterfly-content").addClass("butterfly-content-top"); 
    }, 
    mouseleave:function(){ 
     $(this).children(".butterfly-img").removeClass("butterfly-img-down"); 
     $(this).children(".butterfly-img").next(".butterfly-content").removeClass("butterfly-content-top"); 
    } 
}); 

、それが働きました。ありがとうすべて

Answer 2

"butterfly-container"でイベントをバインドする必要があります。