Evitar que el datepicker active el parma del padre.

abolute un div $.animate({height: 'toggle', opacity: 'toggle'}) con un jQuery $.animate({height: 'toggle', opacity: 'toggle'}) en un jQuery $.hover() .

Tengo un jQuery UI datepicker adjunto a un div dentro del div absolute mencionado anteriormente con changeMonth: true and changeYear: true .

Cuando se cambia un mes o año o se selecciona una fecha, se activa la animación.

¿Cómo puedo evitar que el cambio de mes / año y la selección de fecha $.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); }); }); 

Necesitas hacer un par de cosas para que esto funcione correctamente.

Primero, necesitas envolver el HTML en un div para que actúe como contenedor:

HTML:

 
hover me

A continuación, en lugar de usar .hover() (que a veces puede ser poco confiable), recomiendo usar .mouseenter() junto con .mouseleave() . También use una var para mantener booleano si datepicker abierto / cerrado. La razón de este booleano se debe a la input . Al hacer clic, se .mouseenter() un segundo evento .mouseenter() , por lo que sin él, #hoverme cambiaría por segunda vez.

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

DEMO: http://jsfiddle.net/dirtyd77/e3zP2/18/

¡Espero que esto ayude!