0

これは、これに続く追加の質問です。

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

.overlay divの下に、クリック可能にしたいコンテンツがあります。したがって、この場合、.overlayは不透明度0までフェードしますが、それでも下にあるものをカバーします。

ここで使用するfadeOut()とfadeIn()、.overlayが完全に消え、スクリプトは、まだ.overlayにカーソルを合わせていても、マウスを移動したと見なします。

4

1 に答える 1

0

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.

于 2009-09-18T17:19:16.300 に答える