JQuery mouseout timeout part 2

Question

Hi again. This is an additional question following on from this one.

$('.overlay').bind("mouseenter",function(){
  $(this).fadeTo('slow', 0);
}).bind("mouseleave",function(){
  var $this = $(this);                               
  setTimeout(function() { 
    $this.fadeTo('slow', 1);
  }, 2000);
})

Beneath my .overlay div I have bits of content that I want to make clickable. So, in this case, the .overlay fades to 0 opacity, but still covers what's beneath.

If I use fadeOut() and fadeIn() here, the .overlay disappears completely, and the script thinks I've moved my mouse out, even though I'm still hovering over the .overlay.

Answer 1

The overlay is still eating mouse events even though its opacity is zero. In fact your solution depends on this, because you can't trigger the mouseenter and mouseleave events on the overlay and still have the elements beneath clickable.

Probably the best thing to do is to instead make the overlay and the elements beneath siblings in a container div. The container should have the mouseenter and mouseleave actions bound to it, and when the overlay fades out completely, it should be hidden as well. This will allow you access to click the elements 'beneath' it.

The key is that to be able to click elements beneath your overlay, it has to be hidden or otherwise not covering the elements beneath, even if it is fully transparent.

Incidentally, I think this behavior is browser-specific. In IE, for example, you may be allowed to click beneath a transparent overlay, but in FF you cannot.