如何更改此jquery以便它可以在鼠标hover和鼠标移出时工作

我想让它在鼠标上打开，然后再次关闭，当鼠标离开包含div不仅仅是h2，尝试了一些事情，没有运气。

HTML：

 
Europe: £7.50 (or free on orders over £100)
 
 
 
 
 Country 
 
 Delivery Times (approx) 
 
 
Belgium
 
+ 1 day
 
 
 
 
  

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

jQuery的

  $(document).ready(function(){ dynamicFaq(); }); function dynamicFaq(){ $('.delivery_times').hide(); $('h2').bind('click', 'hover', function(){ $(this).toggleClass('open').next().slideToggle('fast'); }); }  

Answer 1

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

 $(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 2

你的意思是：

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

要么

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

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