Analisis perbezaan antara hover, mouseover dan mouseout dalam jQuery_jquery

Artikel ini menganalisis perbezaan antara tuding, alih tetikus dan tetikus keluar dalam jQuery dengan contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya pernah berfikir bahawa dalam jquery, acara alih tetikus dan keluar tetikus sebenarnya sama dengan acara tuding. Tidak ada perbezaan antara kedua-duanya, mereka sepatutnya sama. Tetapi semalam kesan animasi menyedarkan saya bahawa kedua-duanya tidak setara.

<div class="wrapper">
<div class="img"></div>
<div class="text"></div>
</div>
<div class="point"></div>

Tambahkan acara pada pembalut dan apabila tetikus bergerak ke pembalut, lapisan dengan class="point" akan dibesarkan. Tetapi jika anda menggunakan acara alih tetikus dan keluar tetikus, apabila tetikus bergerak ke lapisan pembalut, lapisan titik akan menjadi lebih besar, tetapi apabila tetikus bergerak di antara lapisan img dan teks, lapisan titik akan menjadi lebih besar dan lebih kecil, sentiasa berubah. . Ini bukan hasil yang kita mahukan ialah selagi tetikus berada pada lapisan pembungkus, sama ada ia adalah img atau teks, titik akan menjadi lebih besar, tetapi apabila tetikus tidak bergerak keluar dari lapisan pembungkus, lapisan titik tidak akan menjadi lebih kecil.

Perlahan-lahan idea itu menjadi jelas. Kami menyelesaikan masalah dengan menggunakan tuding bukannya alih tetikus dan keluar tetikus.

Memang keterlaluan bahawa kami mengambil masa yang lama untuk menyelesaikan masalah yang begitu mudah. Tulis artikel untuk memperingati.

Tambahan: Kemudian tuan saya berkata bahawa sebenarnya terdapat perenggan ini dalam kod sumber jquery:

hover: function( fnOver, fnOut ) {
 return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

Maksudnya tuding! = mouseover mouseout. Tetapi hover=mouseenter mouseleave.

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.