Alih keluar kursor jquery

Alih keluar jquery kursor

Dalam reka bentuk web, gaya kursor ialah elemen yang sangat penting. Ia bukan sahaja boleh membimbing pengguna untuk bergerak dan beroperasi dalam halaman web, tetapi juga meningkatkan keindahan dan interaktiviti halaman web. Dalam sesetengah kes, kursor pada halaman tidak sepatutnya wujud, seperti pada halaman paparan imej atau semasa main balik video. Jadi, bagaimana anda mengalih keluar kursor daripada halaman?

Dalam artikel ini, kami akan memperkenalkan cara mengalih keluar kursor pada halaman menggunakan jQuery. Pautkan fail perpustakaan jQuery ke fail html anda, dan kemudian ikuti langkah di bawah.

Langkah 1: Ikat pendengar acara

Mula-mula, kita perlu mengikat pendengar acara pada elemen yang anda ingin alih keluar kursor daripadanya supaya operasi pengalihan kursor boleh dicetuskan apabila diperlukan. . Kami akan menggunakan acara alih tetikus untuk menentukan sama ada kursor semasa perlu disembunyikan. Berikut ialah kod:

$(document).ready(function(){
  $("#target-element").hover(function(){
    // 当光标悬停在元素上时，触发以下代码
    // ...
  }, function() {
    // 当光标离开元素时，触发以下代码
    // ...
  });
});

Dalam kod di atas, kami menggunakan kaedah hover() jQuery, yang boleh mengikat dua pendengar acara pada masa yang sama. Fungsi pertama ialah badan fungsi kod yang akan dilaksanakan apabila tetikus dilegar di atas elemen. Fungsi kedua ialah badan fungsi kod yang akan dilaksanakan apabila tetikus dialihkan dari elemen.

Langkah 2: Tetapkan Sifat CSS

Setelah kami mengikat pendengar acara, kami boleh menukar sifat CSS elemen apabila diperlukan. Dalam contoh ini, kami akan menggunakan sifat CSS cursor untuk menukar gaya kursor. Kod berikut akan menetapkan gaya kursor kepada tersembunyi:

$("#target-element").css("cursor", "none");

Ini akan menetapkan gaya kursor elemen yang ditentukan kepada tiada, yang menyembunyikan kursor. Anda boleh menukar none kepada nilai lain mengikut keperluan anda, seperti default, pointer atau help, dsb.

Langkah 3: Pulihkan sifat CSS

Jika anda perlu memaparkan semula kursor pada masa tertentu, anda boleh menetapkan semula nilai sifat CSS seperti kod berikut:

$("#target-element").css("cursor", "auto");

Ini akan Memulihkan gaya kursor lalai untuk elemen yang ditentukan. Anda juga boleh menggantikan auto dengan nilai lain dan melaraskan mengikut keperluan anda.

Ringkasan

Dalam reka bentuk web, gaya kursor adalah sangat penting, tetapi dalam beberapa kes, kursor tidak sepatutnya wujud dan perlu dialih keluar. Menggunakan kaedah hover() dan css() jQuery, anda boleh menyembunyikan dan memulihkan kursor dengan mudah pada halaman web apabila diperlukan.

Atas ialah kandungan terperinci Alih keluar kursor jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!