Rumah >hujung hadapan web >tutorial css >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:03727semak imbas
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!