abrir y cerrar la ventana modal al desplazarse y cerrarse cuando esté fuera de foco

Estoy usando fancybox como mi ventana modal. Pude activar la ventana modal para que se abra al pasar el mouse, pero también quiero que cierre la ventana cuando el enlace no está sobre (fuera de foco?).

$("a.mini-view").fancybox().hover(function() { $(this).click(); }); 

Cualquier ayuda es apreciada.

Agregué el mouseout, no soy bueno en js, así que refactorizar lo siguiente sería útil:

 $(document).ready(function() { $('a.mini-view').mouseout(function () { $.fancybox.close(); }); $("a.mini-view").fancybox().hover(function() { $(this).click(); }); $("a.mini-view").fancybox({ 'overlayShow' : false, 'autoScale' : true }); }); 

Si paso de un enlace directamente a otro, sin detenerme entre los dos, no funciona

El principal problema con la activación de eventos mediante .hover() u otros métodos de jQuery de entrada / salida del mouse se llama bubbling .

Para su problema particular, su mejor apuesta es usar el complemento jQuery hoverIntent . Si visita su sitio web, tienen un buen ejemplo de lo que significa tratar con eventos burbujeantes.

Después de cargar el archivo hoverIntent js, puede crear dos funciones para abrir / cerrar fancybox que hoverIntent hoverIntent como devoluciones de llamada:

 function openFancybox(){ $(this).trigger("click"); } function closeFancybox(){ $.fancybox.close(); } 

…. entonces su hoverIntent personalizado hoverIntent :

 $(".mini-view").hoverIntent({ sensitivity: 7, interval:500, timeout:0, over: openFancybox, out: closeFancybox }); // hoverIntent 

(Consulte la documentación para ajustar su configuración)

… por último, su fancybox personalizado de fancybox simplemente se verá como:

 $(".mini-view").fancybox({ 'overlayShow' : false, 'autoScale' : true }); // fancybox 

VEA LA DEMO DE TRABAJO y siéntase libre de explorar el código fuente.

NOTAS LATERALES :

  • Para simplificar su código, podría aplicar ambos complementos en un solo paso al mismo selector:

      $(".mini-view") .fancybox({ 'overlayShow' : false, 'autoScale' : true }) .hoverIntent({ sensitivity: 7, interval:500, timeout:0, over: openFancybox, out: closeFancybox }); 
  • Debido a las opciones que usaste en tu código, asumí que estabas usando fancybox v1.3.4.


ACTUALIZACIÓN [marzo 2015]:

DEMO con las últimas versiones de Fancybox (v2.1.5) y hoverIntent (v1.8.0)

Cree que solo necesitas hacer:

 $('a.mini-view').blur(function () { // close the fancybox });