38

jQuery 1.8 と互換性があるようにコードを変更していますが、hover動作しません。私が使用したとき、clickそれはうまくいきました。これが私のコードです。どこが間違っているのか誰か教えてもらえますか?

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});
4

5 に答える 5

74

jQuery 1.8 で非推奨: 「hover」という名前は、文字列「mouseenter mouseleave」の短縮形として使用されます。これら 2 つのイベントに対して 1 つのイベント ハンドラーをアタッチし、ハンドラーは event.type を調べて、イベントが mouseenter または mouseleave であるかどうかを判断する必要があります。"hover" 疑似イベント名を、1 つまたは 2 つの関数を受け入れる .hover() メソッドと混同しないでください。

ソース: http://api.jquery.com/on/#additional-notes

それはほとんどすべてを物語っています。そのために「ホバー」を使用することはできません。

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});
于 2012-09-04T09:16:58.597 に答える
11

「ホバー」イベントはありません。（あなたの例のように）2つのコールバックを取る.hover（）関数があります。

于 2012-09-04T09:16:20.437 に答える
5

.on関数には 3 つのパラメーターしかありません: http://api.jquery.com/on/

ハンドラーを動的に追加された要素にもバインドする必要がない場合は、hover2 つのイベント ハンドラーで古き良き関数を使用できます。

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​

ちなみに$(selector).hover(handlerIn, handlerOut)は の略です$(selector).mouseenter(handlerIn).mouseleave(handlerOut);。

必要に応じて、onformouseenterとmouseleaveeventsを使用します。

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});​
于 2012-09-04T09:15:49.337 に答える
5

試す：

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

また

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});
于 2012-09-04T09:22:57.593 に答える
1

試す

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});
于 2012-09-04T09:16:55.853 に答える