1

次の関数を使用すると、マウスオーバー時にギャラリー上にボックスが開きます。問題は、開閉の試行が止まらないことです。これは、マウスが画像の周りを移動するときにトリガーされるmouseout関数と関係があります。

腹立たしい。それを修正するためのアイデアはありますか？

$(document).ready(function(){
 $("#gallery, .imageitem, #thumbnails, .thumbs, .cornerimg").mouseover(function(){
     $('#thumbnails').addClass('thumbnailshover');
 });
 $("#gallery").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
});

素晴らしい

4

5 に答える 5

2

mouseoverおよびmouseoutイベントは、ハンドラーを持つ要素内に要素を残すときにトリガーされるため、多くのブラウザーでバグが発生する可能性があります。jqueryのmouseenterイベントとmouseleaveイベントはこれを修正します（ページ下部のデモを参照）。

于 2011-06-28T14:28:38.607 に答える
1

必要がある：

  1. .hover()マウスインおよびマウスアウトイベントを正しく処理するために使用します

  2. から返されたタイマーハンドルを記録しますsetTimeout()

  3. clearTimeout()すべてのコールバックの開始時にそのハンドルを使用して呼び出します。

http://jsfiddle.net/alnitak/R7v4H/で（簡略化された）デモを参照してください

于 2011-06-28T14:25:44.640 に答える
0

#thumbnailsオブジェクトの代わりにmouseout関数をthumbnailshoverクラスに追加してみてください。その後、マウスがサムネイルを離れるまで、サムネイルが消えます。

$(".thumbnailshover").mouseout(function(){
     setTimeout(function() {
           $('#thumbnails').removeClass('thumbnailshover');
        },2000);
 });
于 2011-06-28T14:27:54.773 に答える
0

代わりにmouseleaveを使用してください。mouseoutの問題は、コンテナ内の要素（この場合は#gallery）にマウスを合わせると、特定のブラウザでトリガーされることです。

$('#gallery').mouseleave(function(){
    ...
});
于 2011-06-28T14:29:16.673 に答える
0

mouseout代わりに、#thumbnailsIDで定義する必要があると思います。そうすれば、問題が解決する可能性があります。

何が起こっているのですか：

イベントmouseoverとmouseoutイベントは同じIDで定義され#galleryます。つまり#gallery、mouseover関数にカーソルを合わせると呼び出されますが、オーバーレイがをカバーしている#galleryため、マウスは「上」#galleryではなく、上にあるため#thumbnails、トリガーされます。マウスアウト。

于 2011-06-28T14:30:08.507 に答える