jQuery hover()

Demonstration of jQuery's hover() function using slideUp() and slideDown()

HTML

This layout will only keep the hidden div visible as long as you point to the link<br>
You'll never be able to reach anything inside the div<br><a href="#" id="toggleSwitch_j">jQuery Hover</a>
<div id="theBox_3">Peek-a-boo!</div>

<hr>
This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it.  This would be handy if you need to put links or form elements inside the hidden div, instead of just text to read.
<div id="StayOpen">
    <a href="#" id="toggleSwitch_2">jQuery Hover</a>
    <div id="theBox_2">Peek-a-boo!</div>
</div>

CSS

body {
   background-color: #eef;     
}
#theBox_32{
    display: none; 
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    background-color: #ddf;
}
#toggleSwitch_j, #StayOpen {
 background-color: #cacaca;            
}

JavaScript

$(document).ready(function() {
    $("#toggleSwitch_j").hover(

    function() {
        $("#theBox_3").slideDown(500);
    }, function() {
        $("#theBox_3").slideUp(500);
    });
    
    
    $("#StayOpen").hover(
    function() {
        $("#theBox_2").slideDown(500);
    }, function() {
        $("#theBox_2").slideUp(500);
    });
});