jquery hover do not close neighbour <div> when hovered out
<p>I have a .cart-buttom  element, which when hovered over, opens an e-mail input field which exists in #subscribe-floating-box  element. Here is the code how this happens:</p>

<pre><code>$('.cart-buttom').hover(function(){
   $('#subscribe-floating-box').animate({"width": "toggle"}, { duration: 300 });
},function(){
    $('#subscribe-floating-box').hide("slow");
});
</code></pre>

<p>As you can see from the code, when I hover out from the .cart-buttom, the #subscribe-floating-box hides, which is what I want. What I DO NOT want is when a viewer hovers over #subscribe-floating-box (going with a mouse pointer from .cart-bottom directly to #subscribe-floating-box divs as they are one next to another) it closes immediately, as I want him to enter an e-mail address in the input field which exists inside #subscribe-floating-box  element.</p>

<p>This is the "button" code - the image which when hovered opens the #subscribe-floating-box.</p>

<pre><code>&lt;a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom"&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/library/images/email-signup-button.png" style="position:relative; top:-146px;width:52px;height:63px;" /&gt;&lt;/a&gt;
</code></pre>

<p>Here it is:</p>

<pre><code>   &lt;div id="floating-box"&gt;     
      &lt;a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom"&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/library/images/email-signup-button.png" style="position:relative; top:-146px;width:52px;height:63px;" /&gt;&lt;/a&gt;
   &lt;div id="subscribe-floating-box"&gt;
   &lt;form id="head-search"...&gt;&lt;/form&gt;&lt;/div&gt;
   &lt;/div&gt;               
</code></pre>
