Question

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.

HTML:

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

CSS:

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;}


</style>

Jquery

<script type="text/javascript">

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

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

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


    });
}

</script>

Answer 1

As there’s two different elements, you will have to do something like this:

$(function(){
    var timer;
    $('.delivery_times').hide();
    $('h2, .delivery_times').on({
        mouseenter: function(e) {
            if (e.target.tagName==='H2') $(this).addClass('open');
            $('.delivery_times').slideDown('fast');
            clearTimeout(timer);
        },
        mouseleave: function(e) {
            timer = setTimeout(function() {
                $('h2').removeClass('open');
                $('.delivery_times').slideUp('fast');
            }, 200);
        }
    });
});

​
FIDDLE