html - pointer - custom cursor css

Ocultar cursor en Chrome(y IE)

Question

Tengo el siguiente CSS que oculta el cursor del mouse para cualquier cosa en la página web. Funciona perfectamente en Firefox, pero en IE y Chrome, no funciona.

html {
    cursor: none;
}

En Chrome, siempre veo el puntero del mouse. En IE, sin embargo, veo el último cursor "activo" cuando entró en la pantalla. Presumiblemente es mantener la última selección en lugar de eliminarla.

Answer 1

Así que la mejor manera de lidiar con esto ahora es el api de bloqueo de puntero.

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

Ocultará el cursor del mouse, pero también le dará acceso a los datos sobre el movimiento del mouse.

Answer 2

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

Answer 3

Encontrar algo que funcione en todos los navegadores es un dolor.

El siguiente código funciona en Chrome, IE y Firefox. A IE le gustan los archivos .cur, a Chrome le gusta el png incrustado, y algunos navegadores realmente respetan el ninguno :)

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

Answer 4

Esta propiedad del cursor:none; no es parte de la norma

Vea aquí w3c cursor CSS propiedades .

Es posible que desee buscar en ocultarlo con Javascript o JQuery.

También, mira los archivos de cursor en blanco here .

Y un último enlace a una solución ajax .

Chrome ha tenido este problema desde que se construyó, se enviaron informes a las personas de Chromium y supongo que están trabajando en ello.

Además, no confíe en que cualquier cosa funcionaría en IE. Siempre. :PAG

Answer 5

Tuve el mismo problema en estos días y encontré una buena solución para ocultar el puntero en Google Chrome.

Esta es la definición de W3C de la propiedad url:

Una coma separada de URL a cursores personalizados. Nota: Siempre especifique un cursor genérico al final de la lista, en caso de que no se pueda usar ninguno de los cursores definidos por URL

Por lo tanto, puede definir una url para una imagen no completamente transparente , seguido del puntero predeterminado:

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

Si elige un png totalmente transparente, Chrome mostrará un rectángulo negro en su lugar, pero si elige un png con al menos 1px no transparente, funcionará, y nadie notará el puntero.

Answer 6

Use un applet oculto con la clase java.awt.robot para mover el cursor fuera de la pantalla. Di la esquina inferior izquierda.