Delay Hide

Delay Hide

Hi there,
 
I am just curious how you do the delay hide on elements. I have a div that on mouseover I want it to show a hidden div and on mouseout I want to hide the div again, only I want to give the user some time to mouse back over the toggle div to stop the other one from hiding. This would be for in cases where users accidently mouse out of the now visible div.
 
So I had something like this:

  1. <div style="border: 1px solid #0C0C0C; background-color: #F1F1F1; color: #0c0c0c;

    width: 200px" id="testToggle">

    <span>Test Toggle</span>

    <div id="toggleTarget" style="position: absolute; top: 20px; height: 200px; width: 200px;

    background-color: Orange; display: none;">

    <p>

    A bunch of crap that is totally random and stupid and stuff, you know what I

    am talking about

    </p>

    </div>

    </div>

Only it doesn't do the delay, it does show and hide though.