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（）。并且它不能像我期望的那样工作。我需要悬停使图像下降并且内容上升并且在mouseleave上它变成viseversa。我该怎么办？以下是演示http://design.atousadarabi.ir/mouseovereffect/BlueButterfly/

的链接

Answer 1

您需要将事件绑定到＆＃34; butterfly-container＆＃34;。

Answer 2

这是我的新剧本：

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

它有效。谢谢大家

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

2 个答案: