Question

I’m trying write a script that detects whether a div is visible or not which will determine if the hover event triggers or not.

If the id “contact” is hidden then hovering over a menu item will change a block’s color.
Then if you click another menu item to show id “contact” then the hover should not work. Clicking yet another menu item to hide the id “contact” will then allow the hover to work again.

This is as far as I have gotten with jsFiddle: http://jsfiddle.net/YktAZ/123/

I’m not even sure I need the “else” but that is the only way I have “tricked” the hover into “not working” or not showing a change. I really just need the if to allow it to work and then not trigger the hover if the condition is not met.

Answer 1

If you put your if statements inside your hover functions, this will work.
Basically, each time you’re executing swap_hover(), you’re adding new hover event handlers to the element, it’s not actually turning ‘on’ or ‘off’ the hovers.

The best way would be to do something like this:

$("#item").hover(function(){
    //hover on
    if($("#otherItem").is(":visible"){
        //do this code  
    }
}, function(){
    //hover off
    //do this code.
});