暂时停用.hover

Question

I'm trying to figure out how to temporarily disable .hover in jquery due to an event on the page.

My current jsfiddle looks like this.. http://jsfiddle.net/4vhajam3/3/ (note that I've lopped off a lot of code for sanity's sake)

The current page setup is that if you mouse over any with the class "toqc", the image to QC appears in a div below. My need is that if a user clicks on one of the table cells, the mouseover is temporarily disabled (say for 10 seconds) so that they can move around on the page a bit without changing the image in the div.

I looked at a few other questions on this site (namely jQuery: temporarily disable hover... unintended side effect ) and while I understand the code, I can't seem to modify it to work for me. Specifically I was trying

    var hoverEnabled = true;

$('.toqc').click(
    function(){
        hoverEnabled = false;
    });

if(hoverEnabled){
    $('#ussfcanl').hover(function() {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
});
}

But yet, even after clicking on something with the class .toqc, the hover still goes on as soon as I move to another .toqc class.

Any help would be greatly appreciated..Kinda lost on where to go from here with my code. Thanks!

Answer 1

Put the condition inside, that way it will fire but do nothing.

$('#ussfcanl').hover(function() {
    if(hoverEnabled){
        $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
    }
});

Answer 2

Initially when loading the page the hover function is created. Therefore the hover still works after you change the hoverEnabled var.

You should check the state of the hoverEnabled within the function like so:

//written this way, the function seems to make more sense
$('#ussfcanl').on('mouseenter', function() {
    //checking the type just in case
    if(hoverEnabled === true) {
        $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
    }
});

Answer 3

This allows the hover event to become re-enabled after 10 seconds:

$('.toqc').click(function(){
  hoverEnabled = false;
  clearTimeout(timer);
  timer= setTimeout(function(){
    hoverEnabled=  true;
  },10000);
});

Replace your hover events with the following, which allows you to change images on click even when hoverEnabled is false:

$('#ussfcanl').on('mouseover click', function(event) {
  if(event.type!=='mouseover' || hoverEnabled) {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
  }
});

$('#mexsfcanl').on('mouseover click',function(event) {
  if(event.type!=='mouseover' || hoverEnabled) {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/namaksfcwbg.gif" />');
  }
});

Working Fiddle

Answer 4

There are two aspects to .hover() that you seem to be missing.

The first is that events are bound on page load. That's why, as other answers have mentioned, you need to put the condition inside the event fired callback (the function() {} part), like so:

$('#ussfcanl').hover(function() {
    if(hoverEnabled){
        // do stuff on hover
    }
});

The second part is that the jQuery .hover() method is really a shorthand for the mouseenter and mouseleave events. Calling .hover() with one function will cause that function to fire for both events, which doesn't seem to be what you want.

So you probably want to use two callback functions with this method, the first to tell the browser what to do when the mouseenter event is fired, and the second for the mouseleave event. See the jQuery docs on .hover()

$('#ussfcanl').hover(
    function() {
        if(hoverEnabled){
            // do stuff on mouseenter
        }
    },
    function() {
        if(hoverEnabled){
            // do stuff on mouseleave
        }
    }
);