禁用和启用 mouseenter 和 mouseleave

Question

有人可以帮我解决这个问题吗？我有一个 mouseenter 和 mouseleave 效果，并且想在单击其他 div 时禁用它。 这是我的代码

$('.offer-content').on('mouseenter', function(){
    $(this).find('.offer-desc').show()
}).on('mouseleave', function(){
   $(this).find('.offer-desc').hide()
})
$(".st_sharethis").click(function(){
        $flex(".offer-content").off('mouseleave');
    });

我想要做的是在我关闭“.st_sharethis”类时再次启用 mouseenter 和 mouseleave

提前致谢！

Answer 1

你需要把$flex改成$

以下代码将为您工作：

$('.offer-content').on('mouseenter', function(){
    $(this).find('.offer-desc').show()
}).on('mouseleave', function(){
    $(this).find('.offer-desc').hide()
});
$(".st_sharethis").click(function(){
    $(".offer-content").off('mouseleave');
});

你也可以测试一下：http://jsfiddle.net/Qz2Rk/

Answer 2

我已经创建了一个具有所需行为的小提琴。从您的问题来看，您似乎想在 .st_sharethis 点击上切换事件行为。下面的代码按预期工作。

单击切换事件按钮和每次单击时切换的行为。

小提琴链接：

http://jsfiddle.net/hPAjF/

具有更好 css 的更新版本：

http://jsfiddle.net/hPAjF/1/

HTML：

<div class="offer-content"><div class="offer-desc"></div></div>

<div class="st_sharethis">Toggle events</div>

CSS：

.offer-content{
    width:200px;
    height:200px;
    background-color:#900;
    cursor:pointer;
}

.offer-desc{
    width:100px;
    height:100px;
    background-color:#090;
    display:none;
}

.st_sharethis{

    width:100px;
    height:30px;
    background-color:#009;
    cursor:pointer;
}

JS：

$('.offer-content').on('mouseenter', function(){
    $(this).find('.offer-desc').show()
}).on('mouseleave', function(){
   $(this).find('.offer-desc').hide()
})
var mouseLeave = 0;
$(".st_sharethis").click(function(){
    if(mouseLeave==0)  
    {
        $(".offer-content").off('mouseleave');
        mouseLeave=1;
    }
    else
    {     $('.offer-content').on('mouseleave', function(){
   $(this).find('.offer-desc').hide()
});
     mouseLeave = 1;
    }

    });

在您的网站中，我从控制台添加了以下代码，它提供了您想要的行为。

jQuery(".stCloseNew2").click(function(){

jQuery('.offer-content').on('mouseleave', function(){
   jQuery(this).find('.offer-desc').hide()
});
});