jquery - 如何更改此 jquery 使其适用于鼠标悬停和鼠标移出

Question

我希望它在鼠标悬停时打开，然后在鼠标离开包含 div 而不仅仅是 h2 时再次关闭，尝试了一些事情但没有运气。

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

你的意思是：

$("h2").hover(function() {
  $(".delivery_times").show();
},
function() {
  $(".delivery_times").hide();
});

或者

$("h2").on({
  mouseenter: function () {
    $(".delivery_times").show();
  },
  mouseleave: function () {
   $(".delivery_times").hide();
  }
});

Answer 2

由于有两个不同的元素，你将不得不做这样的事情：

$(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);
        }
    });
});

小提琴

Answer 3

尝试这个

$("h2").on('mouseenter', function() { 
    alert('mouse enter');
}).on('mouseleave', function () {
    alert('mouse leave');
});

Answer 4

试试这个，如果错了，请评论

$("h2").on("mouseenter",function (e) {
    $(".delivery_times").show();
  })
$("h2").parent().on("mouseleave",function () {
   $(".delivery_times").hide();
});