how to change this jquery so that it works on mouse over and mouse out
<p>I want this to open on mouse over then close again when the mouse leaves leaves the containing div not just the h2, tried a few things and had no luck.</p>

<p>HTML:</p>

<pre><code>&lt;div class="deliverycontainer"&gt;
&lt;h2 style=" margin-left: 2px; margin-right: 2px; color: #6588b2; background: #e6edf5;  padding: 10px; cursor: pointer;"&gt;Europe: £7.50 (or free on orders over £100)&lt;/h2&gt;
&lt;div class="delivery_times"&gt;
&lt;table&gt;
&lt;tbody&gt;
&lt;th&gt;
Country
&lt;/th&gt;
&lt;th&gt;
Delivery Times (approx)
&lt;/th&gt;
&lt;tr&gt;
&lt;td&gt;Belgium&lt;/td&gt;
&lt;td&gt;+ 1 day&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:<br>
    </p>

<pre><code>table {  width: 100%; }

table th { font-size: 14px; padding: 5px; background: #e6edf5; }

table tr {width: 48%; margin: 1%;}

table td { font-size: small; text-align: center; padding: 6px; background: #e6edf5;}


&lt;/style&gt;
</code></pre>

<p>Jquery</p>

<pre><code>&lt;script type="text/javascript"&gt;

$(document).ready(function(){
    dynamicFaq();
});

function dynamicFaq(){
    $('.delivery_times').hide();
    $('h2').bind('click', 'hover', function(){

        $(this).toggleClass('open').next().slideToggle('fast');


    });
}

&lt;/script&gt;
</code></pre>
