Sembunyikan kursor pada halaman web menggunakan CSS dan JavaScript-tutorial css-php.cn

Sembunyikan kursor pada halaman web menggunakan CSS dan JavaScript

PHPz

Lepaskan： 2023-09-17 19:53:03

ke hadapan

754 orang telah melayarinya

使用 CSS 和 JavaScript 隐藏网页上的光标

Dalam tutorial ini, kita akan belajar menyembunyikan kursor dalam halaman web menggunakan CSS dan JavaScript. Kadangkala, kita perlu mencipta kursor bergaya dan kemudian perlu menyembunyikan kursor. Mungkin juga perlu untuk menyembunyikan kursor untuk elemen HTML tertentu.

Terdapat dua cara untuk menyembunyikan kursor pada halaman web. Satu menggunakan CSS dan satu lagi menggunakan JavaScript. Kami akan mempelajari kedua-dua kaedah satu demi satu dalam tutorial ini.

Sembunyikan kursor pada halaman web menggunakan CSS

CSS membolehkan kami menukar gaya kursor. Kita boleh mencipta pelbagai jenis kursor menggunakan CSS. Jika kita tidak mahu menunjukkan kursor, kita boleh menggunakan gaya "kursor: tiada" pada elemen HTML tertentu.

Tatabahasa

Pengguna boleh menyembunyikan kursor menggunakan CSS mengikut sintaks berikut.

CSS Selector {
   cursor: none;
}

Salin selepas log masuk

Contoh

Dalam contoh ini, kami mencipta elemen div dan menentukan ketinggian dan lebar yang betul. Selain itu, kami menggunakan warna latar belakang merah pada div menggunakan CSS. Selepas itu, kami menambah atribut kelas pada elemen div dan memulakannya dengan nilai "ujian".

Kami menggunakan nama kelas ujian sebagai pemilih CSS dalam CSS dan menggunakan gaya "kursor: tiada" pada elemen div.

<html>
<head>
   <style>
      .test {
         /* style to hide the cursor */
         cursor: none;
         height: 300px;
         width: 300px;
         background-color: red;
      }
   </style>
</head>
<body>
   <h2>
      Hiding the cursor using <i> CSS. </i>
   </h2>
   <!-- hiding the cursor in this div element -->
   <div class="test">Hiding the cursor for this div.</div>
</body>
</html>

Salin selepas log masuk

Dalam output di atas, pengguna boleh melihat bahawa kursor hilang apabila pengguna menggerakkan kursor ke dalam elemen div.

Sembunyikan kursor pada halaman web menggunakan JavaScript

Kita boleh menggunakan JavaScript untuk menukar gaya mana-mana elemen HTML . Setiap elemen HTML mengandungi atribut gaya, yang boleh kita akses dengan menghantar elemen HTML sebagai rujukan. Selepas itu, kita boleh mengakses sifat gaya khusus atribut gaya dan menukar nilainya. Di sini kita akan menggunakan JavaScript untuk menukar nilai atribut kursor kepada tiada.

Tatabahasa

Pengguna boleh menggunakan JavaScript untuk menyembunyikan kursor pada halaman web mengikut sintaks berikut.

let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";

Salin selepas log masuk

Dalam sintaks di atas, style ialah atribut bagi elemen testDiv dan kursor ialah atribut objek gaya. Kami menukar nilai sifat kursor kepada "none".