如何更改此jquery，使其在鼠标悬停和鼠标悬停时有效 [英] how to change this jquery so that it works on mouse over and mouse out

问题描述

我希望在鼠标悬停时打开它，然后在鼠标离开包含div的容器而不仅仅是h2时再次关闭，尝试了几件事并且没有运气.

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:

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>

推荐答案

由于有两个不同的元素，因此您必须执行以下操作:

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

这篇关于如何更改此jquery，使其在鼠标悬停和鼠标悬停时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！