jQuery .onとhoverを使用することは可能ですか？

<ul>最初のページの読み込み後にJavaScriptが入力されたがあります。現在.bind、mouseoverおよびを使用していmouseoutます。

プロジェクトがjQuery 1.7に更新されたばかりなので、を使用するオプションがありますが、で動作する.onようには見えませんhover。それを使用することが可能である.onとhover？

編集：私がバインドしている要素は、ドキュメントの読み込み後にJavaScriptで読み込まれます。そのため、私はonだけでなくも使用していますhover。

（JavaScriptが入力された要素で使用する必要がある場合は、この回答の最後の編集を確認してください.on()）

JavaScriptを使用して入力されていない要素にこれを使用します。

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()独自のハンドラーがあります：http : //api.jquery.com/hover/

複数のことを行いたい場合は、.on()ハンドラーで次のようにチェーンします。

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

下記の回答によると、で使用できますhoverが.on()、

新しいコードでは強く非推奨ですが、文字列「mouseenter mouseleave」の省略形として使用される疑似イベント名「hover」が表示される場合があります。これらの2つのイベントに単一のイベントハンドラーをアタッチします。ハンドラーはevent.typeを調べて、イベントがmouseenterかmouseleaveかを判別する必要があります。「hover」疑似イベント名を、1つまたは2つの関数を受け入れる.hover（）メソッドと混同しないでください。

また、それを使用してもパフォーマンス上の利点はなく、mouseenterまたはを使用するよりもかさばりmouseleaveます。私が提供した答えは、必要なコードが少なく、このようなことを実現する適切な方法です。

編集

この質問への回答からしばらく経ち、ある程度の牽引力を得ているようです。上記のコードはまだ有効ですが、元の回答に何かを追加したいと思いました。

私が使用して好むmouseenterとmouseleaveで（私はコードで起こっていただきましたを理解するのに役立ちます）.on()それだけで書くと以下のように同じですhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

元の質問は、彼らが適切に使用することができますどのように尋ねなかったためon()にhover()、私はの使用を修正するだろうと思ったon()し、それが必要な追加する見つけることができませんでしたhover()時にコードを。

2012年12月11日を編集

以下に提供されるいくつかの新しい回答.on()はdiv、問題の問題がJavaScriptを使用して入力された場合にどのように機能するかを詳しく説明しています。たとえば、divjQueryの.load()イベントを使用して、次のように入力するとします。

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

上記のコードは.on()有効ではありません。代わりに、次のようにコードを少し変更する必要があります。

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

このコードは、.load()イベントが発生した後にJavaScriptが入力された要素に対して機能します。引数を適切なセレクターに変更するだけです。

質問のリクエストとしてドキュメントが読み込まれた後に作成されたオブジェクトをマウスオーバー/マウスアウトすると、これらのソリューションはどれもうまくいきませんでした。私はこの質問が古いことを知っていますが、まだ探している人のための解決策があります：

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

これにより、関数がセレクターにバインドされるため、ドキュメントの準備ができた後に作成されたこのセレクターを持つオブジェクトは、引き続きそれを呼び出すことができます。

JavaScriptの残りの部分がどのように見えるのかわからないので、干渉があるかどうかはわかりません。しかし.hover()、のイベントとしては問題なく動作し.on()ます。

$("#foo").on("hover", function() {
  // disco
});

イベントを利用できるようにするには、イベントから返されたオブジェクトを使用します。

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

jQueryホバー関数は、マウスオーバーとマウスアウトの機能を提供します。

$（selector）.hover（inFunction、outFunction）;

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

出典：http : //www.w3schools.com/jquery/event_hover.asp

ウェブからサーフィンして、貢献できると感じました。@calethebrewerが投稿した上記のコードを使用すると、セレクターで複数の呼び出しが発生し、予期しない動作が発生する可能性があることに気づきました。例：-

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

このフィドルhttp://jsfiddle.net/TWskH/12/は私のポイントを示しています。プラグインなどで要素をアニメーション化すると、これらの複数のトリガーが意図しない動作を引き起こし、アニメーションまたはコードが必要以上に呼び出される可能性があることがわかりました。

私の提案は、単にmouseenter / mouseleaveに置き換えることです：-

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

これにより、アニメーションの複数のインスタンスが呼び出されなくなりましたが、親の子がいつホバーされているのかを判断する必要があるため、最終的にマウスオーバー/マウス休暇を使いました。

あなたはあなたが追加ノートセクションが言うことをする.on()ことhoverによって使うことができます：

新しいコードでは強く非推奨ですが、文字列「mouseenter mouseleave」の省略形として使用される疑似イベント名「hover」が表示される場合があります。これらの2つのイベントに単一のイベントハンドラーをアタッチします。ハンドラーはevent.typeを調べて、イベントがmouseenterかmouseleaveかを判別する必要があります。「hover」疑似イベント名を、1つまたは2つの関数を受け入れる.hover（）メソッドと混同しないでください。

それは次のようにすることです：

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

編集（jQuery 1.8以上のユーザー向けの注意）：

jQuery 1.8で非推奨、1.9で削除：文字列「mouseenter mouseleave」の省略形として使用される「hover」という名前。これらの2つのイベントに単一のイベントハンドラーをアタッチします。ハンドラーはevent.typeを調べて、イベントがmouseenterかmouseleaveかを判別する必要があります。「hover」疑似イベント名を、1つまたは2つの関数を受け入れる.hover（）メソッドと混同しないでください。

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

スペースで区切られた1つまたは複数のイベントタイプを指定できます。

だから、hover等号mouseenter mouseleave。

これは私の提案です：

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

他のイベントの条件として必要な場合は、次の方法で解決しました。

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

次に、別のイベントで簡単に使用できます。

 if ($(this).data('hover')){
      //...
 }

（私はis(':hover')これを解決するためにいくつかのを使用しているようです。しかし、これは（まだ）有効なjQueryセレクターではなく、すべての互換性のあるブラウザーで動作しません）

jQueryプラグインhoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.htmlは、ここにリストされた単純なアプローチよりもはるかに進んでいます。それらは確かに機能しますが、必ずしもユーザーの期待どおりに動作するとは限りません。

hoverIntentを使用する最大の理由は タイムアウトです機能です。これにより、ユーザーが目的のアイテムをクリックする前に、ユーザーがマウスを少し右または左にドラッグしすぎてメニューが閉じないようにすることができます。また、弾幕でホバーイベントをアクティブ化しない機能を提供し、ホバリングの集中を待ちます。

使用例：

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

これの詳細な説明はhttps://stackoverflow.com/a/1089381/37055で見つけることができます