Apakah mungkin menyembunyikan kursor di halaman web menggunakan CSS atau Javascript?

129

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!

javascript html css yeyeyerman
sumber

Jawaban:

203

Dengan CSS:

selector { cursor: none; }

Sebuah contoh:

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>
Luaskan cuplikan

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.

Lucas Jones
sumber
Itu bekerja dengan sempurna! Yang aneh adalah bahwa saya mengintip spesifikasi W3C ( w3.org/TR/CSS2/ui.html ) dan mereka tidak mengatakan apa-apa tentang itu. Terima kasih!
yeyeyerman
10
W3 bukan! World World Wide Web.
Lucas Jones
4
Cara peduli dengan peramban yang tidak mendukung CSS3: Gunakan 1x1px png transparan atau png transparansi 1%.
Derek 朕 會 功夫
1
Setahu saya IE6 mendukung PNG transparan, selama itu transparansi nyata dan bukan transparansi saluran alpha. Jika ragu, periksa diri Anda dengan test suite: libpng.org/pub/png/pngsuite.html .
Shi
3
@MatthiasHerrmann: Coba document.body.style.cursor = 'auto'.
Lucas Jones
30

Pointer Lock API

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();

Catatan tambahan

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);
});
John Weisz
sumber
1
Terima kasih untuk ini. Saya menemukan ini satu-satunya cara yang dapat diandalkan untuk membuang kursor di SPA ketika beralih ke tayangan slide layar penuh.
Velojet
1

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.

zaycker
sumber
4
Gunakan transparansi 1% .png / .cur sebagai gantinya.
Derek 朕 會 功夫
1

Jika Anda ingin melakukannya dalam CSS:

#ID { cursor: none !important; }

sumber
7
Anda umumnya harus menghindari !important.
Luca Steeb
0

Untuk seluruh dokumen html coba ini

html * {cursor:none}

Atau jika beberapa css menimpa kursor Anda: tidak ada gunanya! Penting

html * {cursor:none!important}
Pavel Salaquarda
sumber
0

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})

gaspar
sumber