I am using fancybox as my modal window. I was able to trigger the modal window to open on hover, but I also want it to close the window when the link is not being hovered over (out of focus?).

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

Any help is appreciated.

I added the mouseout, I am not good at js, so refactoring the following would be helpful:

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

});

If I go from one link directly to another, without pausing between the two, it doesn't work

I am using fancybox as my modal window. I was able to trigger the modal window to open on hover, but I also want it to close the window when the link is not being hovered over (out of focus?).

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

Any help is appreciated.

I added the mouseout, I am not good at js, so refactoring the following would be helpful:

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

});

If I go from one link directly to another, without pausing between the two, it doesn't work

• javascript
• jquery
• html
• fancybox

2 Answers 2

The main problem with triggering events using .hover() or other mouse in/out jQuery methods is called bubbling.

For your particular issue, your best bet is using the jQuery plugin hoverIntent. If you visit their website, they have a good example about what dealing with bubbled events mean.

After you loaded the hoverIntent js file, you can create two functions to open/close fancybox that will be called by hoverIntent as callbacks :

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

.... then your hoverIntent custom script :

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

(see documentation to fine-tune your settings)

...last, your fancybox custom script will simply look like:

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

SEE WORKING DEMO and feel free to explore the source code.

SIDE NOTES:

• To simplify your code, you could actually apply both plugins in a single step to the same selector :

   $(".mini-view")
   .fancybox({
    'overlayShow' : false,
    'autoScale'   : true
   })
   .hoverIntent({
    sensitivity: 7,
    interval:500,
    timeout:0,
    over: openFancybox,
    out: closeFancybox 
   });
  

• Because the options you used in your code, I assumed you were using fancybox v1.3.4.

UPDATE [March 2015] :

DEMO using the latest versions of Fancybox (v2.1.5) and hoverIntent (v1.8.0)

Believe you just need to do:

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