Disabling a jquery hover function with a click function

Question

We have a gallery, with a caption that fades in when you hover your cursor over the image div. Our next step is to add a button that will show all the captions, so folks can scroll and read without running their cursor all over the screen.

Creating a showall function is easy, but when the cursor passes over any photo, the hover function fires and the caption on that image disappears.

Is there an easy way to have the showall function disable the hover function when the showall is active?

Our basic jquery code is below, .tease is the caption:

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ $(this).children('.tease').fadeIn('900'); },
    function(){ $(this).children('.tease').fadeOut('2500'); }
);

The basic html for each image:

<div class="img33">
<img src="../dir/someimage.jpg">
<div class="tease">Tease copy</div>
</div>

Can I see your click function for the showall method so I can properly answer this question. — Ohgodwhy
– Ohgodwhy, Commented Nov 13, 2012 at 9:27

Ketola · Accepted Answer · 2012-11-13 09:40:27Z

3

You could just define a global variable that you check against in the hover function.

For example

var hoverEnabled = true;

$('.tease').hide();
$('.img33, .img40, .img50, .img60').hover(
    function(){ if(hoverEnabled) $(this).children('.tease').fadeIn('900'); },
    function(){ if(hoverEnabled) $(this).children('.tease').fadeOut('2500'); }
);

$('#showAllButton').click(function() {
    $('.tease').show();
    hoverEnabled = false;
}

Alternatively you could bind your hover event using .bind() and event name (for example hover.showTease) and .unbind() it in your showall function.

answered Nov 13, 2012 at 9:40

Ketola

2,76720 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Jakimowicz · Accepted Answer · 2012-11-13 09:37:58Z

2

You can unbind "hover" this way:

$(this).unbind('mouseenter mouseleave');

Just do this when you want to disable the hover. Alternatively, to have greater control and not keep adding and removing events, you may want to introduce a class that is added and removed, and only execute hover actions if certain class is set to the element. Like this:

$(this).hover(
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    },
    function() { 
        if ($(".yourElement").hasClass("allowHover")) { 
            ... 
        }  
    }
 );

Then just add or remove a class and the hover will be enabled or disabled.

answered Nov 13, 2012 at 9:37

Luke Jakimowicz

3801 silver badge5 bronze badges

Comments

Ohgodwhy · Accepted Answer · 2012-11-13 09:39:36Z

0

var allShown = false;

function showAll(){
    //some imaginary code

    //we're showing all
    allShown = true;
}

This should be ni the scope of the DOM ready.

$(function(){
   $('.img33, .img40, .img50, .img60').hover(function(){ 
        if(allShown === false){
            $(this).children('.tease').fadeIn('900');
        }
    },function(){  
        if(allShown === false){
            $(this).children('.tease').fadeOut('2500');
        }
    });

    $('ele').on('something', function(){
        //some code..
        allShown = false;
    });

    //some event to fire the showAll function
    $('ele').on('something', function(){
        showAll();
        allShown = true;
    });



});

answered Nov 13, 2012 at 9:39

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

Disabling a jquery hover function with a click function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related