jQuery fly out
<p>I wrote this jQuery script.
It works somewhat OK.  I want this fly out to close when the user mouse goes outside the fly out. How would I do that?</p>

<p>Here is the code below:</p>

<pre><code>    &lt;script language="javascript"&gt;
        $(document).ready(function() {
            $('#slick-box').hide();
            $('a#slick-toggle').mouseover(function() {
                $('#slick-box').toggle(400);
            }).mouseout(function(){
            $('#slick-toggle').hide();});
        });
    &lt;/script&gt;

    &lt;style&gt;
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a id="slick-toggle" href="#"&gt; toggle the box &lt;/a&gt;
    &lt;div style="position:relative;outline:1px dashed green;padding:10px;"&gt;
        &lt;div id="slick-box" style="position:absolute;outline: 1px dashed hotpink; color:#fff; background-color:#000; opacity:0.8; filter:80;top:0px; left:0px ;"&gt;
            &lt;h2&gt;music name &lt;/h2&gt;
            &lt;p&gt; This will be shown  and hidden&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
    &lt;p&gt;lorem ip sum loerm ip lorem ip sum lorem ipsum&lt;/p&gt;
&lt;/body&gt;
</code></pre>
