1

画像があります。JQueryを使用すると、画像にカーソルを合わせると画像のサイズが大きくなり、画像の下にあるDIVが上にスライドして、半分不透明な画像にオーバーレイが表示されるようになります。画像領域の下半分を占めます。

これは正常に機能しますが、オーバーレイにカーソルを合わせると（ただし、画像と同じ領域にある場合）、画像に焦点が合っていないため、画像が再び縮小され、ホバーアウトイベントが発生します。

「画像の領域にいる限り、オーバーレイにカーソルを合わせてもかまいません」と言っているかのように、カーソルを合わせたときにオーバーレイを無視するにはどうすればよいですか。

4

1 に答える 1

0

mouseenter と mouseleave の代わりに mousemove イベントを使用し、画像のサイズを使用してマウスが画像上にあるかどうかを判断できます。

例：

        $(window).mousemove(function(evt) {
            var image = $("#image");
            var imageX0 = image.offset().left 
            var imageY0 = image.offset().top
            var imageX1 = imageX0 + image.width()
            var imageY1 = imageY0 + image.height()
            if( evt.pageX >= imageX0 && evt.pageX <= imageX1 && evt.pageY >= imageY0 && evt.pageY <= imageY1) {
                $("#status").text('Hovered!')
            } else {
                $("#status").text('Not hovered')
            }

        })

ここでライブをチェックしてください：http: //dl.dropbox.com/u/486054/stackoverflow/hover-overlay.html

于 2012-04-29T10:30:45.330 に答える