Cara menggunakan JQuery untuk menyembunyikan elemen dengan pergerakan tetikus

JQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan sejumlah besar fungsi dan kaedah untuk memudahkan tugas JS biasa. Menyembunyikan elemen dalam JQuery adalah salah satu tugas yang sangat biasa. Berikut ialah cara menggunakan tetikus JQuery untuk mengalihkan elemen tersembunyi.

JQuery menyediakan kaedah yang sangat berguna "hide()", yang boleh menyembunyikan elemen HTML. Jika anda ingin menyembunyikan berbilang elemen, anda boleh menggunakan kelas yang sama untuk memilihnya dan kemudian memanggil kaedah hide() untuk menyembunyikannya.

Berikut ialah contoh:

Kod HTML:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

Kod CSS:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

Kod JS:

$('.box').hide();

Dalam kod di atas, kami menggunakan JQuery untuk memilih semua elemen dengan kelas "kotak" dan memanggil kaedah .hide() untuk menyembunyikannya. Jika anda melihat halaman dalam penyemak imbas sekarang, anda tidak akan melihat apa-apa kerana semua elemen dengan kelas "kotak" disembunyikan.

Walau bagaimanapun, terdapat masalah dengan ini: bagaimana untuk memaparkannya semula? Anda boleh menggunakan kaedah .show() untuk memulihkan elemen. Tetapi di sini kita akan menggunakan kaedah yang lebih mudah, iaitu mengawal penyembunyian dan penampakan elemen menggunakan pergerakan tetikus.

Berikut ialah contoh:

Kod HTML:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

Kod CSS:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

Kod JS:

$('.box').mouseover(function(){
    $(this).hide();
}).mouseout(function(){
    $(this).show();
});

Dalam kod di atas, kami menggunakan JQuery untuk memilih semua elemen dengan kelas "kotak" dan mendaftarkan acara pergerakan tetikus (mouseover). Apabila tetikus bergerak ke atas elemen, kaedah hide() dipanggil untuk menyembunyikan elemen. Apabila tetikus bergerak menjauh, kaedah show() dipanggil untuk memaparkan elemen.

Jika anda melihat halaman ini dalam penyemak imbas anda sekarang, anda akan melihat semua elemen. Walau bagaimanapun, apabila anda menggerakkan tetikus ke atas elemen, ia akan disembunyikan. Apabila tetikus dialihkan, ia akan muncul semula.

Di atas ialah cara menggunakan tetikus JQuery untuk memindahkan elemen tersembunyi. Teknik ini boleh digunakan dalam banyak aplikasi web seperti menu, tab, dll.

Atas ialah kandungan terperinci Cara menggunakan JQuery untuk menyembunyikan elemen dengan pergerakan tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!