Hide and show a div

by burhans

HTML

<div id="outty" class="newBody">
    <div id="inny" class="nesty">
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.<br/>
        This is a nesty nester nested div.
    </div>
</div>

CSS

div.newBody
{
    background-image: url(http://media.npr.org/chrome/news/nprlogo_138x46.gif);
    height: 300px;
    width: 414px;
}

div.nesty
{
    background-color: black;
    color: white;
    position: absolute;
    left: 50px;
    top: 50px;
}

JavaScript

$(document).ready(function()
{
    var moveCount = 0;

    $("#outty").mouseenter(function()
    {
        moveCount = 0;
        $("#inny").hide();
    });

    $("#outty").mousemove(function()
    {
        moveCount += 1;
        
        if (moveCount > 15)
        {
            $("#inny").show();
        }
    });
    
    $("#outty").click(function(clickEvent)
    {
        if (!clickEvent.isPropagationStopped())
        {
            moveCount = 0;
            $("#inny").hide();
        }
    });
    
    $("#inny").click(function(clickEvent)
    {
        clickEvent.stopPropagation();
    });
});