Saya ingin menyembunyikan kursor ketika menampilkan halaman web yang dimaksudkan untuk menampilkan informasi di gedung gedung. Tidak harus interaktif sama sekali. Saya mencoba dengan properti kursor dan gambar kursor transparan tetapi saya tidak membuatnya bekerja.
Adakah yang tahu kalau ini bisa dilakukan? Saya kira ini dapat dianggap sebagai ancaman keamanan bagi pengguna yang tidak tahu di mana dia mengklik, jadi saya tidak terlalu optimis ... Terima kasih!
Jawaban:
Dengan CSS:
selector { cursor: none; }Sebuah contoh:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Untuk mengatur ini pada elemen dalam Javascript, Anda dapat menggunakan styleproperti:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Jika Anda ingin mengatur ini di seluruh tubuh:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Pastikan Anda benar-benar ingin menyembunyikan kursor. Ini benar - benar dapat mengganggu orang.
1x1px png transparan atau png transparansi 1%.
document.body.style.cursor = 'auto'.
Sementara cursor: nonesolusi CSS pasti padat dan mudah solusi , jika tujuan Anda yang sebenarnya adalah untuk menghilangkan kursor default saat aplikasi web Anda sedang digunakan, atau menerapkan Anda sendiri interpretasi gerakan mouse baku (untuk game FPS, misalnya), Anda mungkin ingin mempertimbangkan untuk menggunakan Pointer Lock API sebagai gantinya.
Anda bisa menggunakan requestPointerLock pada suatu elemen untuk menghapus kursor, dan mengalihkan semua mousemoveperistiwa ke elemen itu (yang mungkin atau mungkin tidak Anda tangani):
document.body.requestPointerLock();Untuk melepaskan kunci, Anda bisa menggunakan exitPointerLock :
document.exitPointerLock();Tanpa kursor, nyata
Ini adalah panggilan API yang sangat kuat. Ini tidak hanya membuat kursor Anda tidak terlihat, tetapi sebenarnya menghapus kursor asli sistem operasi Anda . Anda tidak akan dapat memilih teks, atau melakukan apa pun dengan mouse Anda (kecuali mendengarkan beberapa peristiwa mouse dalam kode Anda) sampai kunci penunjuk dilepaskan (baik dengan menggunakan exitPointerLockatau menekan ESCbeberapa browser).
Artinya, Anda tidak dapat meninggalkan jendela dengan kursor untuk ditampilkan kembali, karena tidak ada kursor.
Batasan
Seperti yang disebutkan di atas, ini adalah panggilan API yang sangat kuat, dan karenanya hanya diperbolehkan untuk dibuat sebagai respons terhadap beberapa interaksi pengguna langsung di web, seperti klik; sebagai contoh:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});Selain itu, requestPointerLocktidak akan berfungsi dari kotak pasir iframekecuali allow-pointer-lockizin ditetapkan.
Pemberitahuan pengguna
Beberapa browser akan meminta pengguna untuk konfirmasi sebelum kunci terkunci, beberapa hanya akan menampilkan pesan. Ini berarti kunci penunjuk mungkin tidak aktif segera setelah panggilan. Namun, aktivasi sebenarnya dari penguncian pointer dapat didengarkan dengan mendengarkan pointerchangeacara pada elemen yang requestPointerLockdipanggil:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});Sebagian besar browser hanya akan menampilkan pesan satu kali, tetapi Firefox terkadang akan mengirim spam pesan pada setiap panggilan. AFAIK, ini hanya bisa diselesaikan dengan pengaturan pengguna, lihat Menonaktifkan pemberitahuan kunci-penanda di Firefox .
Mendengarkan gerakan mouse mentah
Pointer Lock API tidak hanya menghapus mouse, tetapi juga mengarahkan ulang data pergerakan mouse mentah ke elemen requestPointerLockyang dipanggil. Ini dapat didengarkan hanya dengan menggunakan mousemoveacara, lalu mengakses movementXdan movementYproperti pada objek acara:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});Saya melakukannya dengan transparan * .cur 1px ke 1px, tetapi sepertinya titik kecil. :( Saya pikir itu hal lintas-browser terbaik yang bisa saya lakukan. CSS2.1 tidak memiliki nilai 'tidak ada' untuk properti 'kursor' - itu ditambahkan dalam CSS3. Itulah mengapa itu bisa diterapkan tidak di mana-mana.
Jika Anda ingin melakukannya dalam CSS:
#ID { cursor: none !important; }!important.
Untuk seluruh dokumen html coba ini
html * {cursor:none}Atau jika beberapa css menimpa kursor Anda: tidak ada gunanya! Penting
html * {cursor:none!important}Jika Anda ingin menyembunyikan kursor di seluruh halaman web, menggunakan bodytidak akan berfungsi kecuali jika menutupi seluruh halaman yang terlihat, yang tidak selalu terjadi. Untuk memastikan kursor disembunyikan di mana-mana di halaman, gunakan:
document.documentElement.style.cursor = 'none';Untuk mengaktifkannya kembali:
document.documentElement.style.cursor = 'auto';Analog dengan notasi CSS statis dalam jawaban oleh Pavel Salaquarda (pada intinya: html * {cursor:none})