Jquery 悬停时，在更改顶部pf元素后触发mouseleave（）

这是我的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>

我的问题是，当我用鼠标进入另一个div更改顶部的圆圈时，它会触发mouseleave（）。我需要悬停，使图像下降，内容上升，鼠标悬停，使图像下降。我该怎么办？ 这是演示的链接

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

这是我的新脚本：

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

---

它成功了。谢谢大家

蝴蝶圈边框是一个空的div？是的，它有高度和宽度以及虚线边框，如您所见。起初不是这样的，但我想如果我这样做的话，mouseleave（）会做得很好。但这并不重要，是的

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