CODEWITHSUNDEEP
jquerymouseentermouseleave
user1154488
user1154488

Reputation: 157

jquery - Toggle disjointed div on mouseenter and mouseleave?

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;
        }
    });

Upvotes: 0

Views: 438

Answers (1)

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

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);
});

​

Upvotes: 1

Related Questions