CODEWITHSUNDEEP
jquerymouseleave
labli
labli

Reputation: 15

disable and enable mouseenter and mouseleave

can someone help me with this ? I have a mouseenter and mouseleave effect, and want to disable it when click on other div.. this is my code

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

what i want to happen is to enable the mouseenter and mouseleave again when i close the ".st_sharethis" class

thanks in advance!

Upvotes: 0

Views: 4112

Answers (2)

abhinsit
abhinsit

Reputation: 3272

I have created a fiddle with the required behavior. From your question it looks like you want to toggle the event behavior on the .st_sharethis click. Below code is working as expected.

Click on toggle event button and behavior with toggle with every click.

Fiddle link:

http://jsfiddle.net/hPAjF/

Updated version with better 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;
    }

    });

In your website i have added following code from console and it has given the behavior you want.

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

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

Upvotes: 1

S A M
S A M

Reputation: 151

You need to change the $flex to $

Below code will work for you:

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

You can also test it : http://jsfiddle.net/Qz2Rk/

Upvotes: 4

Related Questions