web-dev-qa-db-ja.com

ホバー時のjqueryが機能しない

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();
  });
});
javascriptjqueryhtmljavascript-eventshover
33
Param Veer

jQuery 1.8で非推奨：名前「hover」は、文字列「mouseenter mouseleave」の省略形。これらの2つのイベントに単一のイベントハンドラーをアタッチし、ハンドラーは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();
    });
});
58
nbrooks

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

8
tborychowski

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

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

_$('.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);の短縮形です。

必要な場合は、onおよびmouseenterイベントにmouseleaveを使用します。

_$(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();
  });
});​
_
4
Danil Speransky

試してください：

$(".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();
        });
    }
});

OR

$(".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();
    });
  }
});
2
Sudhir Bastakoti

試す

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