css alih keluar kursor

Dalam pembangunan web, kadangkala kami tidak mahu kursor tetikus lalai muncul Dalam kes ini, kami boleh menggunakan CSS untuk mengalih keluar kursor. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mengeluarkan kursor dan meneroka beberapa butiran CSS untuk mengalih keluar kursor.

1. Gunakan CSS untuk mengeluarkan kursor

Kita boleh menggunakan atribut kursor CSS untuk mengalih keluar kursor:

html,body{
  cursor: none;
}

Selepas menjalankan kod di atas, kursor tetikus tidak akan dipaparkan lagi. Ini adalah cara paling mudah untuk mengeluarkan kursor menggunakan CSS.

2. Butiran

1. Kedudukan kursor

Walaupun kod di atas mengeluarkan kursor, kursor sebenarnya masih wujud dan ia berada di bahagian atas kedudukan tengah halaman. Ini mungkin mengganggu kita kerana kedudukan kursor kelihatan pelik.

Penyelesaian adalah seperti berikut:

* {
    pointer-events: none;
}

Kod ini boleh menetapkan acara tetikus semua elemen untuk dilumpuhkan, supaya kursor tidak lagi muncul di mana-mana pada halaman, tetapi hanya berhenti di The sudut kiri atas halaman.

2. Halang bar skrol daripada muncul di halaman

Memandangkan kod di atas terikat pada html dan elemen badan, bar skrol mungkin muncul atau halaman mungkin berubah secara tidak dijangka. Untuk masalah ini, kita boleh menyelesaikannya dengan kod berikut:

html{
  overflow: hidden;
}

Ini akan mengalih keluar kursor dengan sempurna dan menghalang bar skrol daripada muncul pada halaman.

3. Isu keserasian

Walaupun sangat mudah untuk mengalih keluar kursor menggunakan CSS, dalam amalan, kadangkala anda akan menghadapi beberapa isu keserasian. Contohnya, dalam sesetengah penyemak imbas, kod di atas tidak boleh mengalih keluar kursor sepenuhnya dan mungkin hanya mengurangkan kursor kepada saiz yang sangat kecil dan kemudian menyembunyikannya. Dalam kes ini, kita perlu menggunakan beberapa kod keserasian khusus untuk menyelesaikan masalah ini.

Sebagai contoh, pada penyemak imbas Chrome, anda boleh menggunakan kod berikut untuk menyelesaikan isu keserasian:

html,body{
  cursor: url('about:blank'), -moz-none, -webkit-none, none;
}

Kod ini boleh menyembunyikan kursor sepenuhnya pada penyemak imbas Chrome tanpa masalah keserasian .

3. Ringkasan

CSS ialah alat yang sangat berkuasa Kami boleh menggunakannya untuk menyelesaikan banyak masalah dalam pembangunan web, seperti mengalih keluar kursor. Artikel ini memperkenalkan cara menggunakan CSS untuk mengalih keluar kursor dan membincangkan beberapa butiran CSS untuk mengalih keluar kursor. Sudah tentu, kita mungkin menghadapi masalah lain semasa latihan, yang memerlukan pembelajaran dan penerokaan berterusan.

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