hide a div when clicking on the outer container using jQuery
<p>I have 2 divs, one overlayed on top of another. When I click on the outer div, I want to hide the inner div. When I click on the inner div nothing should happen to the inner Div. At the same time, the links in the inner div should work fine. How to do it using jquery?</p>

<pre><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;

.outer {
    background-color: #000;  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}

.inner {
    background-color: blue;
    width: 240px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -150px;
}
</code></pre>

<p>jQuery code that doesn't work as expected:</p>

<pre><code>$('.outer').click(function(e){
    $('.inner').hide();
});

$('.inner').click(function(e){
    return false;
});   
</code></pre>
