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();
});
});
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();
});
});
「ホバー」イベントはありません。 (例のように)2つのコールバックを受け取る.hover()関数があります。
_.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();
});
});
_
試してください:
$(".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();
});
}
});
試す
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});