I want the div show when mouse hover on another, a

Question

first here is my html code:

<div class="outter">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="inner"></div>

when my mouse over the "item",the "inner" show,when mouseout the "inner" disppeared:

$(".item").hover(function(){
   // setTimeout(function(){$('.inner').hide('slow');},2000);
   $('.inner').show('slow');
},function(){
    $('.inner').stop(true, true).hide('slow');
})

as well I want when "inner" showed,it will disppear automatic after few seconds

so I write setTimeout(function(){$('.inner').hide('slow');},2000); as the note in code above

but the resault is not good ,here is the online case it cann't reset the "settimeout" when mouse on another "item",so how can I solve the problem?

Thank you!

Answer 1

Try this:

$(".item").hover(function() {
$('.inner').show('slow');}, 
function() {var timer = setTimeout(function() {
clearTimeout(timer);
$('.inner').stop(true, true).hide('slow');
}, 2000);
});

Edited to fix an error on my part... http://jsfiddle.net/3p4MU/10/

Answer 2

Try putting clearTimeout(mytime); as the first line in your .hover's second parameter function.

$(".item").hover(function(){
   myTime = setTimeout(function(){$('.inner').hide('slow');},2000);
   $('.inner').show('slow');
},function(){
    clearTimeout(myTime);
    $('.inner').stop(true, true).hide('slow');
})

This code was not tested but should send you in the right direction...I hope.