Rumah > Artikel > hujung hadapan web > Sembunyikan kursor pada halaman web menggunakan CSS dan JavaScript

Sembunyikan kursor pada halaman web menggunakan CSS dan JavaScript

PHPzke hadapan: 2023-09-17 19:53:03700semak imbas

使用 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;
}

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>

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";

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

Contoh

Dalam contoh di bawah, kami mengakses elemen div HTML melalui idnya dalam teg <script>. Selepas itu, kita perlu menukar nilai sifat kursor objek gayanya kepada "tiada" untuk menyembunyikan kursor dalam elemen div tertentu itu. </script>

<html>
<head>
   <style>
      .test {
         height: 300px;
         width: 300px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <h2>Hiding the cursor using <i>JavaScript.</i></h2>
   <div class="test" id="test">Hiding the cursor for this div.</div>
   </br>
   <button onClick="HideCursor()">Hide cursor on Div</button> 
   <script>
      
      // Accessing the HTML element by id
      let testDiv = document.getElementById("test");
      function HideCursor() {
         
         // hiding the cursor
         testDiv.style.cursor = "none";
      }
   </script>
</body>
</html>

Dalam output di atas, apabila pengguna mengklik pada butang "Sembunyikan Kursor pada Div", ia menyembunyikan kursor pada elemen div.

Kami mempelajari dua cara untuk menyembunyikan kursor pada elemen HTML tertentu pada halaman web. Pengguna boleh menggunakan salah satu kaedah ini bergantung pada sama ada mereka mahu menukar gaya kursor daripada CSS atau JavaScript.

Atas ialah kandungan terperinci Sembunyikan kursor pada halaman web menggunakan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html class 对象选择器

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?Artikel seterusnya：Bagaimana untuk menjadikan anak panah tersuai bar skrol berfungsi pada peranti mudah alih?

Artikel berkaitan

Lihat lagi