gezinirken, üst pf elemanını değiştirdikten sonra mouseleave()

Question

Bu benim HTML kodum. Burada

<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> 

Ve JavaScript/jQuery Kod: Ben fare daireyi diğer div değişimin üst girmek ve MouseLeave tetiklemek zaman

$(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"); 
    } 
}); 

}); 

Benim sorundur(). Ve beklediğim gibi işe yaramıyor. Vurgulu hale getirmem gerekiyor, görüntü aşağı iniyor ve içerik yükseliyor ve mouseleave viseversa gidiyor. Ne yapmalıyım? İşte bağlantı için "bağlantı kutucuğuna" bağlamanız gerekmektedir. http://design.atousadarabi.ir/mouseovereffect/BlueButterfly/

Answer 1

Bu benim yeni script:

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

ve işe yaradı. Teşekkürler tüm

Answer 2