當懸停時，改變頂部pf元素後觸發mouseleave（）

這是我的HTML代碼。當懸停時，改變頂部pf元素後觸發mouseleave（）

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

});

我的問題是，當我將鼠標進入這個圈子其他分區的變化的頂部，並觸發鼠標離開（）。而且它不能像我所期望的那樣工作。我需要盤旋，使圖像下降，內容上升，並且在mouseleave上它變成viseversa。我該怎麼辦？這裏是演示的鏈接http://design.atousadarabi.ir/mouseovereffect/BlueButterfly/

來源

2016-04-12 Atousa

蝴蝶圈的邊界是一個空的div嗎？ –

是的，它具有高度和寬度以及虛線邊框。起初它不是這樣，但我想如果我這樣做mouseleave（）表現不錯。但它沒有 – Atousa

這是我的新的腳本：

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

和它的工作。謝謝所有

來源

2016-04-12 06:53:42 Atousa

您需要綁定「蝴蝶容器」上的事件。

來源

2016-04-12 06:49:48

非常感謝。是的 – Atousa

當懸停時，改變頂部pf元素後觸發mouseleave（）

回答

相關問題