jquery - Переключить развязанный div на mouseenter и mouseleave?

Question

Я пробовал искать похожие вопросы и использовать эти ответы для своей ситуации, но либо я делаю это неправильно (вероятно ...), либо это не совсем то, что мне нужно?

По существу, я пытаюсь переключить .block-5 при зависании над # b-hover-nav. Тем не менее, я хочу, чтобы .block-5 оставался открытым, чтобы пользователь мог читать/взаимодействовать со ссылками в нем ... То же самое для другой ссылки в примере ...

Я разместил на jsfiddle (http://jsfiddle.net/9fcFv/), но я и в том числе его ниже:

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

Answer 1

проблема у вас возникли вызвано тем, что нет времени для пользователя, чтобы переместить их наведите курсор мыши на объект перед событием мыши на триггере кнопки. Вам нужно дать им немного времени, чтобы добраться туда с помощью мыши.

Кроме того, я предпочитаю встроенный метод зависания jQuery. Но вы можете использовать привязку, если хотите.

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