0

jquery を使用してタグ付けシステムを実装しようとしています。

.tagged と .taggeditem の 2 つの div があります

ユーザーが .tagged にカーソルを合わせると、tageditem をフェードインしたいと思います。ただし、taggeditem は .tagged から約 50 ピクセル離れているため、ユーザーがマウスを .tagged から離れると .taggeditem はフェードアウトします。タグ付けされたアイテムがフェードアウトするまでの 6 秒の遅延を設定することにしました。ユーザーのマウスがタグ付きアイテムの上にある場合、タグ付きアイテムがフェードアウトするのを防ぐ方法はありますか?

Here is the script I am using 

       $('.tagged').on({
mouseenter: function () {
    clearTimeout($(this).data('timeoutId'));
    var id_= $(this).attr('post-value');
    var id = $(this).attr('value');
    $('#taggeditem'+id).fadeIn(200);
    $('#taggeditemmask'+id_).fadeIn(200);
},
mouseleave: function () {
   var id_ = $(this).attr('post-value');
   var id = $(this).attr('value');
  if ($('#taggeditem'+id).is(':hover')) {

       }else{
       $('#taggeditem'+id).delay(600).fadeOut(200);
       $('#taggeditemmask'+id_).delay(600).fadeOut(200);
}
}
    });
4

1 に答える 1

0

この投稿を見つけましたマウスがjQueryの要素の上にあるかどうかを確認するにはどうすればよいですか? フェードアウトしたい要素の mouseenter と mouseleave で settimout を使用します。

コードに基づくフィドルの例を次に示します。

以下のコード

$(function()
{
    var timeout;

    $('.tagged').on({
        mouseenter: function () {
            $('#taggeditem').fadeIn(200);
        },
        mouseleave: function () {
          timeout = setTimeout(function(){
              $('#taggeditem').fadeOut(200);
            }, 600);

        }
    });

      $('#taggeditem').on({
            mouseenter: function () {
                clearTimeout(timeout);
            },
            mouseleave: function () {
               timeout = setTimeout(function(){
                  $(this).fadeOut(200);
               }, 600);
            }
       });      
  });
于 2013-11-03T20:11:36.970 に答える