jquery - このjqueryを変更して、マウスオーバーとマウスアウトで機能するようにする方法

Question

これをマウスオーバーで開き、マウスがh2だけでなく、含まれているdivを離れたときに再び閉じて、いくつかのことを試しましたが、うまくいきませんでした。

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

これを試して

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

Answer 3

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

FIDDLE

Answer 4

これを試してみて、間違っている場合はコメントしてください

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