当悬停时，在更改顶部pf元素后触发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()。它不像我预期的那样起作用，我需要悬停，使图像下降，内容上升，而在鼠标保存时，则相反。我该怎么办？下面是演示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

您需要在“蝴蝶容器”上绑定事件。