2010-04-14 20 views
17

Ho il seguente CSS che nasconde il cursore del mouse per qualsiasi cosa sulla pagina web. Funziona perfettamente in Firefox, ma in IE e Chrome, non funziona.Nascondi cursore in Chrome (e IE)

html { 
    cursor: none; 
} 

In Chrome, vedo sempre il puntatore del mouse. In IE, tuttavia, vedo che il cursore era l'ultimo 'attivo' quando è entrato nello schermo. Presumibilmente sta mantenendo l'ultima selezione invece di rimuoverla.

+0

Perché si vuole fare una cosa simile? – graphicdivine

+0

Perché ho uno schermo di fronte al cliente che non ha interazione umana. All'avvio del box, si attiva automaticamente il browser Web, ma il cursore si avvia automaticamente al centro dello schermo che maschera parte della pagina web. Quindi deve essere nascosto. – Chris

+0

In alternativa è possibile utilizzare un altro browser per la visualizzazione. Colpire F11 sulla maggior parte dei browser li renderà a schermo intero. – Kyle

risposta

21

Questa proprietà cursor:none; non è parte dello standard

Vedi qui w3c cursor CSS properties.

Si potrebbe voler guardare a nasconderlo con Javascript o JQuery.

Inoltre, esaminare i file di cursore vuoti here.

E un ultimo collegamento a un ajax solution.

Chrome ha riscontrato questo problema da quando è stato creato, sono stati inviati rapporti alle persone allo Chromium e presumo che ci stiano lavorando.

Inoltre, non credere che qualcosa funzionerebbe in IE. Mai. : P

-5

Utilizzare un'applet nascosta con la classe java.awt.robot per spostare il cursore fuori dallo schermo. Dì l'angolo in basso a sinistra.

+8

Wow ... Non riesco a pensare a un modo più difficile e più complicato per svolgere un compito così semplice. – samulisoderlund

+0

I +1 questo. Non è un compito semplice. cursore: none; funziona "in Chrome", ma se fai clic con il pulsante sinistro del mouse riappare il cursore. Se provi a trascinare, il cursore riappare. Se sei in grado di fare qualcosa come aprire e chiudere l'ispettore, il cursore riappare. Ci sono * molti * modi per recuperarlo. Questa soluzione è il tipo di cosa che fornisce la rimozione permanente del cursore, qualora la tua applicazione lo richieda. –

11

Ho avuto lo stesso problema in questi giorni e ho trovato una buona soluzione per nascondere il puntatore in Google Chrome.

Questa è la W3C definition di proprietà url:

una virgola ha separato di URL da personalizzati cursori. Nota: Specificare sempre un cursore generica alla fine della lista, nel caso nessuna delle URL definiti cursori possono essere utilizzati

Quindi, si può definire un URL per immagine non completamente trasparente, seguito dal puntatore predefinito:

cursor: url(img/almost_transparent.png), default; 

Se si sceglie un png totalmente trasparente, Chrome visualizzerà un rettangolo nero, invece, ma se si sceglie un png con almeno non 1px trasparente che funzionerà, e nessuno noterà la puntatore.

+1

Solo per farti sapere che Chrome supporta "cursor: none;" e IE supporta cursori completamente trasparenti. È possibile utilizzare fogli di stile specifici del browser. ;) – trusktr

+0

Grazie per il commento. Al momento della mia risposta Chrome non supportava il cursore: nessuno – alexmeia

+0

Potrebbe farlo funzionare su IE e Edge (tramite browser) –

7

Trovare qualcosa che funziona attraverso i browser è un dolore.

Il codice seguente funziona su Chrome, IE e Firefox. IE piace .cur file, Chrome piace il png incorporato e alcuni browser in realtà nessuno rispetta la :)

div { 
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='), 
    url(images/blank.cur), 
    none; 
} 
1

Quindi il modo migliore per affrontare questo ora è l'API di blocco puntatore.

https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

Sarà nascondere il cursore del mouse, ma consentono di accedere ai dati di circa il movimento del mouse pure.

+1

Dal sito Web: 'Questa è una tecnologia sperimentale' == Non adatta agli utenti con browser leggermente più vecchi – Chris

+0

corretto. È bello però per altri casi d'uso specifici. (Touchscreen Kiosk-ey) – RandallB

-1

In css: * { cursor: url(cursor.png), none !important }

Problemi correlati