Kapan memilih fungsi mouseover () dan hover ()?

112

Apa perbedaan antara jQuery .mouseover()dan .hover()functions? Jika mereka benar-benar sama mengapa jQuery menggunakan keduanya?

jquery mouseevent Bhojendra Rauniyar
sumber
4
Ini bukan pertanyaan rangkap. Tautan yang Anda sediakan memiliki peristiwa gerakan mouse dan arahkan mouse tetapi milik saya adalah peristiwa gerakan mouse dan arahkan mouse.
Bhojendra Rauniyar
1
mereka berbeda dalam hal yang sama seperti gerakan mouse nad mouseleave dan jawaban yang diterima di bawah ini tidak akurat ... fungsi hover menambahkan peristiwa mouseenter dan mouseleve bukan peristiwa gerakan mouse dan mouseout
Arun P Johny
1
lihat jsfiddle.net/arunpjohny/cZb5b/1 gerakkan mouse dari elelemen ke childdan periksa konsol
Arun P Johny
@ArunPJohny tolong baca ulang, yang mengatakan mouseenter dan mouse jangan arahkan mouse dan mouseout.
Bhojendra Rauniyar
1
juga dengan hover - jsfiddle.net/arunpjohny/cZb5b/2 jika Anda dapat menganalisis konsol, Anda dapat menemukan perbedaannya ...
Arun P Johny

Jawaban:

113

Dari dokumentasi jQuery resmi

  • .mouseover()
    Ikat event handler ke event JavaScript "gerakan mouse", atau picu event itu pada sebuah elemen.

  • .hover() Ikat satu atau dua penangan ke elemen yang cocok, untuk dieksekusi saat penunjuk mouse masuk dan meninggalkan elemen.

    Menelepon $(selector).hover(handlerIn, handlerOut)adalah singkatan dari: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Ikat penangan kejadian yang akan diaktifkan saat mouse memasuki elemen, atau picu penangan itu pada elemen.

    mouseoveraktif saat pointer berpindah ke elemen turunan juga, sementara mouseenteraktif hanya saat pointer berpindah ke elemen terikat.

Artinya apa ini

Karena itu, .mouseover()adalah tidak sama dengan .hover(), untuk alasan yang sama .mouseover()adalah tidak sama dengan .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)
Navin Rauniyar
sumber
31

.hover()fungsi menerima dua argumen fungsi, satu untuk mouseenteracara dan satu untuk mouseleaveacara.

mishik
sumber
ini adalah poin yang bagus dalam hal perbedaan antara dua fungsi yang disebutkan dalam judul pertanyaan, Terima kasih! lihat tautan di bawah ini di w3schools untuk mengetahui cara kerja .hover (): w3schools.com/jquery/event_hover.asp
Bahman.
8

Anda dapat mencobanya http://api.jquery.com/mouseover/ di halaman dokumen jQuery. Ini adalah demo kecil dan interaktif yang membuatnya sangat jelas dan Anda benar-benar dapat melihatnya sendiri.

Singkatnya, Anda akan melihat bahwa peristiwa mouse over terjadi pada elemen saat Anda melewatinya - datang dari salah satu elemen turunan ATAU induk, tetapi peristiwa masuk mouse hanya terjadi saat mouse bergerak dari elemen induk ke elemen.

Shivaji Ranaware
sumber
1

Dari dokumen resmi: ( http://api.jquery.com/hover/ )

Metode .hover () mengikat penangan untuk kejadian mouseenter dan mouseleave. Anda dapat menggunakannya untuk hanya menerapkan perilaku ke elemen selama mouse berada di dalam elemen.

Wottensprels
sumber
1

Seperti yang bisa Anda baca di http://api.jquery.com/mouseenter/

Peristiwa JavaScript mouseenter adalah hak milik Internet Explorer. Karena utilitas umum acara, jQuery mensimulasikan acara ini sehingga dapat digunakan apa pun browsernya. Acara ini dikirim ke elemen saat penunjuk mouse memasuki elemen. Setiap elemen HTML dapat menerima acara ini.

Edorka
sumber