Voglio nascondere il cursore quando si mostra una pagina web che ha lo scopo di visualizzare informazioni in una sala dell'edificio. Non deve essere affatto interattivo. Ho provato con la proprietà cursore e un'immagine del cursore trasparente ma non l'ho fatto funzionare.
Qualcuno sa se questo può essere fatto? Suppongo che questo possa essere considerato una minaccia alla sicurezza per un utente che non può sapere dove sta facendo clic, quindi non sono molto ottimista ... Grazie!
Risposte:
Con CSS:
selector { cursor: none; }Un esempio:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Per impostarlo su un elemento in Javascript, puoi usare la styleproprietà:
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Se vuoi impostarlo su tutto il corpo:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Assicurati di voler davvero nascondere il cursore, però. Può davvero infastidire le persone.
1x1png trasparente px o png trasparenza 1%.
document.body.style.cursor = 'auto'.
Mentre la cursor: nonesoluzione di CSS è sicuramente un solido e facile soluzione , se il tuo obiettivo attuale è quello di rimuovere il cursore predefinito mentre si utilizza l'applicazione web, o implementare la propria interpretazione del movimento grezzo del mouse (per i giochi FPS, per esempio), si potrebbe preferire invece utilizzare l' API di blocco puntatore .
È possibile utilizzare requestPointerLock su un elemento per rimuovere il cursore e reindirizzare tutti gli mousemoveeventi su quell'elemento (che è possibile o meno gestire):
document.body.requestPointerLock();Per rilasciare il blocco, è possibile utilizzare exitPointerLock :
document.exitPointerLock();Nessun cursore, per davvero
Questa è una chiamata API molto potente. Non solo rende invisibile il cursore, ma rimuove effettivamente il cursore nativo del sistema operativo . Non sarai in grado di selezionare il testo o fare qualsiasi cosa con il mouse (eccetto l'ascolto di alcuni eventi del mouse nel tuo codice) fino a quando non viene rilasciato il blocco del puntatore (utilizzando exitPointerLocko premendo ESCalcuni browser).
Cioè, non puoi lasciare la finestra con il cursore per mostrarla di nuovo, poiché non c'è cursore.
restrizioni
Come accennato in precedenza, questa è una chiamata API molto potente ed è quindi consentita solo in risposta ad alcune interazioni dirette dell'utente sul Web, come un clic; per esempio:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});Inoltre, requestPointerLocknon funzionerà da un sandbox a iframemeno che non allow-pointer-locksia stata impostata l' autorizzazione.
User-notifiche
Alcuni browser richiederanno conferma all'utente prima che venga attivato il blocco, altri visualizzeranno semplicemente un messaggio. Ciò significa che il blocco del puntatore potrebbe non attivarsi subito dopo la chiamata. Tuttavia, l'attivazione effettiva del blocco del puntatore può essere ascoltata ascoltando l' pointerchangeevento sull'elemento su cui è requestPointerLockstato chiamato:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});La maggior parte dei browser visualizzerà il messaggio solo una volta, ma Firefox occasionalmente invierà spam al messaggio ogni singola chiamata. AFAIK, questo può essere risolto solo dalle impostazioni dell'utente, vedi Disabilitare la notifica di blocco del puntatore in Firefox .
Ascoltare il movimento del mouse crudo
L'API di blocco puntatore non solo rimuove il mouse, ma reindirizza i dati di movimento del mouse non elaborati sull'elemento su cui è requestPointerLockstato richiamato. Questo può essere ascoltato semplicemente usando l' mousemoveevento, quindi accedendo alle proprietà movementXe movementYsull'oggetto evento:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});L'ho fatto con trasparente * .cur da 1px a 1px, ma sembra un piccolo punto. :( Penso che sia la migliore cosa tra i browser che posso fare. CSS2.1 non ha valore 'none' per la proprietà 'cursor' - è stato aggiunto in CSS3. Ecco perché è praticabile non ovunque.
Se vuoi farlo in CSS:
#ID { cursor: none !important; }!important.
Per l'intero documento HTML provare questo
html * {cursor:none}O se alcuni CSS sovrascrivono il cursore: nessuno lo usa! Importante
html * {cursor:none!important}Se si desidera nascondere il cursore nell'intera pagina Web, l'utilizzo bodynon funzionerà a meno che non copra l'intera pagina visibile, che non è sempre il caso. Per assicurarti che il cursore sia nascosto ovunque nella pagina, usa:
document.documentElement.style.cursor = 'none';Per riattivarlo:
document.documentElement.style.cursor = 'auto';L'analogo con la notazione CSS statico è nella risposta da Pavel Salaquarda (in sostanza: html * {cursor:none})