jquery - Toggle disjointed div on mouseenter and mouseleave?

Question

I've tried searching for similar questions and using those responses for my situation, but either I'm doing it wrong (probable...) or it's not exactly what I need?

Essentially, I'm trying to toggle .block-5 when hovering over #b-hover-nav. However, I want .block-5 to stay open so that the user can read / interact with the links in it... The same for the other link in the example...

I've posted in on jsfiddle, (http://jsfiddle.net/9fcFv/) but I'm also including it below:

#content {
     width: 400px;
    height: 400px;
}
span.button-hover-nav {
 display: block;
 clear: both;  
  width: 200px;    
    margin-bottom: 20px;
}
.left {
      width: 200px;
      float: left;
}
.block-5 {
     display: none;
    width: 200px;
    float: right;
}
.block-5 a {
     color: blue;
}
.block-6 {
     display: none;
    width: 200px;
    float: right;
}
.block-6 a {
     color: green;
}


<div class="body">
 <span class="button-hover-nav" id="b-hover-nav">Hover Me</span>
</div>

<div class="block-5">
<h1>Please stay open unless I leave...</h1>
<a link="#">Click Me</a>
</div>

//Totally does not work:
// Bind the mouse over /out to the first DIV.
            $('#b-hover-nav').live('mouseenter', function() {
        $('.block-5').show();
    }).live('mouseleave', function() {
        t = setTimeOut(function() {
            $('.block-5').hide();
        }, 100);
    });

    $('.block-5').live('mouseenter', function() {
        if(t) {
            clearTimeout(t);
            t=null;
        }
    });

Kaizen Programmer · Answer 1 · 2012-09-27T22:01:09.577

The problem you are having is caused by the fact that there is no time for the user to move their mouse over to the object before the mouseout event on the button triggers. You need to give them a little time to get there with the mouse.

Also, I prefer jQuery's builtin hover method. But you can use binding if you'd like.

JSFiddle

var timer1,timer2;
var delay=1000;
$("#b-hover-nav").hover(function() {
    clearTimeout(timer1);
    $('.block-6').hide();
    $('.block-5').show();
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, delay);
});

$("#c-hover-nav").hover(function() {
    clearTimeout(timer2);
    $('.block-5').hide();
    $('.block-6').show();
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-6").hover(function() {
    clearTimeout(timer2);
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-5").hover(function() {
    clearTimeout(timer1);
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, 2000);
});

jquery - Toggle disjointed div on mouseenter and mouseleave?

1 Answers1