Apakah mungkin menggunakan jQuery .on dan melayang?

Saya punya <ul>yang diisi dengan javascript setelah memuat halaman awal. Saat ini saya menggunakan .binddengan mouseoverdan mouseout.

Proyek ini baru saja diperbarui ke jQuery 1.7 jadi saya memiliki opsi untuk digunakan .on, tetapi sepertinya saya tidak bisa menggunakannya hover. Apakah mungkin untuk menggunakan .ondengan hover?

EDIT : Elemen yang saya ikat dimuat dengan javascript setelah dokumen dimuat. Itu sebabnya saya menggunakan ondan bukan hanya hover.

( Lihatlah hasil edit terakhir dalam jawaban ini jika Anda perlu menggunakan .on()elemen yang diisi dengan JavaScript )

Gunakan ini untuk elemen yang tidak diisi menggunakan JavaScript:

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

.hover()memiliki penangannya sendiri: http://api.jquery.com/hover/

Jika Anda ingin melakukan banyak hal, rangkai dalam .on()handler seperti:

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

Menurut jawaban yang diberikan di bawah ini Anda dapat menggunakan hoverdengan .on(), tetapi:

Meskipun sangat tidak disarankan untuk kode baru, Anda mungkin melihat pseudo-event-name "hover" digunakan sebagai singkatan untuk string "mouseenter mouseleave". Ini melampirkan pengendali acara tunggal untuk kedua acara tersebut, dan penangan harus memeriksa event.type untuk menentukan apakah acara tersebut adalah mouseenter atau mouseleave. Jangan bingung pseudo-event-name "hover" dengan metode .hover (), yang menerima satu atau dua fungsi.

Juga, tidak ada keuntungan kinerja untuk menggunakannya dan itu lebih besar daripada hanya menggunakan mouseenteratau mouseleave. Jawaban yang saya berikan membutuhkan lebih sedikit kode dan merupakan cara yang tepat untuk mencapai sesuatu seperti ini.

EDIT

Sudah lama sejak pertanyaan ini dijawab dan tampaknya telah mendapatkan beberapa daya tarik. Kode di atas masih berdiri, tetapi saya ingin menambahkan sesuatu ke jawaban asli saya.

Sementara saya lebih suka menggunakan mouseenterdan mouseleave(membantu saya memahami apa yang terjadi dalam kode) dengan .on()itu sama seperti menulis yang berikut denganhover()

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

Karena pertanyaan awal memang bertanya bagaimana mereka dapat digunakan on()dengan benar hover(), saya pikir saya akan memperbaiki penggunaan on()dan tidak merasa perlu menambahkan hover()kode pada saat itu.

EDIT 11 DESEMBER 2012

Beberapa jawaban baru yang disediakan di bawah ini merinci bagaimana cara .on()kerjanya jika divpertanyaan tersebut diisi menggunakan JavaScript. Misalnya, katakanlah Anda mengisi acara divmenggunakan jQuery .load(), seperti:

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

Kode di atas untuk .on()tidak tahan. Sebagai gantinya, Anda harus sedikit memodifikasi kode Anda, seperti ini:

$(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

Kode ini akan berfungsi untuk elemen yang diisi dengan JavaScript setelah suatu .load()peristiwa terjadi. Ubah saja argumen Anda ke pemilih yang sesuai.

Tak satu pun dari solusi ini yang berfungsi untuk saya ketika mousing atas / keluar dari objek yang dibuat setelah dokumen dimuat sebagai permintaan pertanyaan. Saya tahu pertanyaan ini sudah lama tetapi saya punya solusi untuk mereka yang masih mencari:

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

Ini akan mengikat fungsi ke pemilih sehingga objek dengan pemilih ini dibuat setelah dokumen siap masih dapat memanggilnya.

Saya tidak yakin seperti apa sisa Javascript Anda, jadi saya tidak akan tahu apakah ada gangguan. Tapi .hover()berfungsi dengan baik sebagai acara bersama .on().

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

Jika Anda ingin dapat memanfaatkan acara, gunakan objek yang dikembalikan dari acara:

$("#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/

Fungsi jQuery hover memberikan fungsionalitas mouseover dan mouseout.

$ (selector) .hover (inFunction, outFunction);

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

Sumber: http://www.w3schools.com/jquery/event_hover.asp

Hanya berselancar dari web dan merasa saya bisa berkontribusi. Saya perhatikan bahwa dengan kode di atas yang diposting oleh @calethebrewer dapat mengakibatkan beberapa panggilan melalui pemilih dan perilaku tak terduga misalnya: -

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

Biola ini http://jsfiddle.net/TWskH/12/ mengilustrasikan poin saya. Ketika menghidupkan elemen seperti di plugin saya telah menemukan bahwa beberapa pemicu ini menghasilkan perilaku yang tidak diinginkan yang dapat mengakibatkan animasi atau kode dipanggil lebih dari yang diperlukan.

Saran saya adalah cukup ganti dengan mouseenter / mouseleave: -

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

Meskipun ini mencegah beberapa kali animasi saya tidak dipanggil, saya akhirnya pergi dengan mouseover / mouseleave karena saya perlu menentukan kapan anak-anak dari orang tua sedang dibawa.

Anda dapat menggunakannya .on()dengan hovermelakukan apa yang dikatakan bagian Catatan Tambahan:

Meskipun sangat tidak disarankan untuk kode baru, Anda mungkin melihat pseudo-event-name "hover" digunakan sebagai singkatan untuk string "mouseenter mouseleave". Ini melampirkan pengendali acara tunggal untuk kedua acara tersebut, dan penangan harus memeriksa event.type untuk menentukan apakah acara tersebut adalah mouseenter atau mouseleave. Jangan bingung pseudo-event-name "hover" dengan metode .hover (), yang menerima satu atau dua fungsi.

Itu akan dilakukan sebagai berikut:

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

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

});

EDIT (catatan untuk pengguna jQuery 1.8+):

Dihentikan pada jQuery 1.8, dihapus pada 1.9: Nama "hover" digunakan sebagai singkatan untuk string "mouseenter mouseleave". Ini melampirkan pengendali acara tunggal untuk kedua acara tersebut, dan penangan harus memeriksa event.type untuk menentukan apakah acara tersebut adalah mouseenter atau mouseleave. Jangan bingung pseudo-event-name "hover" dengan metode .hover (), yang menerima satu atau dua fungsi.

$("#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');

Anda dapat memberikan satu atau beberapa jenis acara yang dipisahkan oleh spasi.

Begitu hoversama mouseenter mouseleave.

Ini pendapat saya:

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

Jika Anda membutuhkannya sebagai kondisi di acara lain, saya menyelesaikannya dengan cara ini:

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

Kemudian di acara lain, Anda dapat dengan mudah menggunakannya:

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

(Saya melihat ada gunanya is(':hover')untuk menyelesaikan ini. Tapi ini bukan (belum) pemilih jQuery yang valid dan tidak bekerja di semua browser yang kompatibel)

Plugin jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html melangkah lebih jauh daripada pendekatan naif yang tercantum di sini. Meskipun mereka pasti bekerja, mereka mungkin tidak perlu berperilaku seperti yang diharapkan pengguna.

Alasan terkuat untuk menggunakan hoverIntent adalah batas waktu fitur . Ini memungkinkan Anda untuk melakukan hal-hal seperti mencegah menu dari penutupan karena pengguna menyeret mouse mereka sedikit terlalu jauh ke kanan atau kiri sebelum mereka mengklik item yang mereka inginkan. Ini juga menyediakan kemampuan untuk tidak mengaktifkan acara melayang dalam rentetan dan menunggu untuk fokus melayang.

Contoh penggunaan:

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 )

Penjelasan lebih lanjut tentang ini dapat ditemukan di https://stackoverflow.com/a/1089381/37055