防止datepicker触发父mouseleave

我在jQuery $.animate({height: 'toggle', opacity: 'toggle'})上显示了一个带有jQuery $.animate({height: 'toggle', opacity: 'toggle'}) $.hover() 。

我有一个jQuery UI datepicker附加到上述absolute div其中包含changeMonth: true和changeYear: true 。

更改月份或年份或选择日期时，动画将触发。

如何阻止月/年更改和日期选择触发$.hover() ？

http://jsfiddle.net/e3zP2/

HTML

 
hover me
 
 arbitrary text 
  

JS

 $(document).ready(function () { $("#dateSelector").datepicker({ changeMonth: true, changeYear: true }); $("#hoverAnchor").add($("#hoverMe")).hover(function(){ $("#hoverMe").stop(true,false).animate({ height: 'toggle', opacity: 'toggle' }, 200); }); }); 

Answer 1

您需要做几件事才能使其正常工作。

首先，您需要将div包装在div以充当容器：

HTML：

 
 
hover me
 
arbitrary text 
 
  

接下来，我建议使用.mouseenter()和.mouseleave() ，而不是使用.hover() （有时可能不可靠.mouseleave() 。 还可以使用var来保存datepicker是否打开/关闭的布尔值。 这个布尔值的原因是由于input 。 单击时，将调用第二个.mouseenter()事件，因此如果没有它， #hoverme将再次切换。

 $(document).ready(function () { $("#dateSelector").datepicker({ changeMonth: true, changeYear: true }); var _enter = false; $("#container").add( $("#container")).mouseenter(function () { if (!_enter) { $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); } _enter = true; }).mouseleave(function () { _enter = false; $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); }); }); 

演示： http ： //jsfiddle.net/dirtyd77/e3zP2/18/

希望这可以帮助！