2011-07-08 14 views
19

Estoy tratando de crear un cursor personalizado utilizando la siguiente imagen:CSS encargo del cursor no funciona en FF/Chrome

http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png 

El tamaño de la imagen debe ser retenida. Intenté simplemente usar body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, aunque eso no funciona en FF/Chrome. (ni siquiera revisando otros navegadores)

¿Cuál es la razón por la que no funciona?

Respuesta

24

El problema no es sólo con el código CSS que carecen segundo argumento, pero con el archivo de imagen .

Si simplemente cambia el tamaño, hágalo más pequeño (probé 32px con fines de prueba) funciona como un amuleto.

Es posible que también desee "puntero" en lugar de automático, a juzgar por el aspecto de la imagen;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer; 

EDITAR: Ahora me doy cuenta que quería mantener el tamaño, sino que simplemente no funcionará. ver https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property para más información

+8

"En Gecko (Firefox) el límite del tamaño del cursor es 128 × 128px. Las imágenes de cursor más grandes se ignoran". (https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property) – Gajus

+2

Quirksmode indica que el límite es 32x32, y que esta es una restricción de Windows, no una restricción del navegador. – Spudley

+1

'name =" "&& ext =" "&& sudo apt-get install imagemagick && convert" $ nombre "." $ Ext "-resize 32x" $ nombre "-pequeño." $ Ext "' –

15

Firefox requiere un segundo argumento que no es enlace como

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto; 

Hay una gran referencia en Quirksmode CSS2 - Cursor Styles

+0

Debería haber mencionado, pero lo he intentado también y no funciona. La demostración está disponible en http://anuary.com/dev/hp/pad3/. – Gajus

+1

¿Qué versión de FireFox estás usando? Funciona bien para mí, suponiendo que deberías ver una mano gigante cuando pasas el mouse sobre la caja negra. El artículo de Quirksmode menciona que la imagen debe ser más pequeña que 32x32px, que la de la demostración no parece ser. – detaylor

+1

@Guy: funciona bien en FF5; no funciona en Opera 11 o IE8 (obtengo el cursor "puntero" normal). Tenga en cuenta que la posición del mouse está en las coordenadas del cursor (0,0), es decir, decenas de píxeles a la izquierda del "dedo índice"; a menos que los objetivos de clic sean acordes con el tamaño del cursor, sus usuarios harán un clic incorrecto ("ese dedo señala * allí *, pero hace clic * por allí *, ¿está roto mi mouse?"). – Piskvor