jquery mouse over
<p>In Jquery is there a way to stop the <code>mouseout()</code> function from stop activating when you go over a certain <code>div</code> it isn't a child either. My html code.</p>

<pre><code> &lt;div class="featured"&gt;
            &lt;div class="featured_top"&gt;
                    &lt;p&gt;&lt;span class="theme"&gt;Theme&lt;/span&gt; Transparent &lt;/p&gt;                                        
            &lt;/div&gt;
            &lt;div class="pic" style="background: blue"&gt;
                &lt;!-- image --&gt;                              
            &lt;/div&gt;
            &lt;div class="featured_des"&gt;
                &lt;p&gt; this is awesome theme &lt;/p&gt;
            &lt;/div&gt;                                  
  &lt;/div&gt;
</code></pre>

<p>my js(jQuery)</p>

<pre><code>$(document).ready(function(){
      $(".pic").mouseover(function(){
        $(this).animate({
            width: 0                        
            });
        });

        $(".pic").mouseout(function(){
            $(this).animate({
                width: 214                      
            });

             });
       });
</code></pre>

<p><strong>So my question</strong> is can you stop the <code>mouseout()</code> function from activating when it is <code>featured_des</code> div. atm it animates the width of the <code>.pic</code> class which works fine but when it finishes <code>animate</code> the cursor is over the <code>featured_des</code> which activates the <code>mouseout</code> and hides the description again</p>

<p><strong>example::</strong> <a href="http://www.grubber.co.nz/developer/_social_development/market.html" rel="nofollow">http://www.grubber.co.nz/developer/_social_development/market.html</a></p>
