English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Atributo de cursor CSS, utilizado para definir el tipo de cursor (es decir, el puntero del ratón) cuando el ratón se mueve sobre una área o un enlace en una página web.
Los navegadores generalmente muestran el puntero del ratón en cualquier parte vacía de la página web, con guantes en cualquier enlace o elemento que se pueda hacer clic y con el cursor de edición en cualquier texto o campo de texto. Con CSS, puedes redefine estos atributos para mostrar diferentes tipos de punteros.
h1 {
cursor: mover;
}
p {
cursor: texto;
}Prueba aquí‹/›La siguiente tabla muestra la mayoría de los navegadores aceptarán diferentes tipos de punteros. Coloca el puntero del ratón en el enlace “TEST” de la columna de salida para mostrar el puntero.
| Ver | valor | Ejemplo | Ver |
|---|---|---|---|
| predeterminado | a:hover{cursor:default;} | Probar | |
| puntero | a:hover{cursor:pointer;} | Probar | |
| texto | a:hover{cursor:text;} | Probar | |
| esperar | a:hover{cursor:wait;} | Probar | |
| ayuda | a:hover{cursor:help;} | Probar | |
| progress | a:hover{cursor:progress;} | Probar | |
| crosshair | a:hover{cursor:crosshair;} | Probar | |
| move | a:hover{cursor:move;} | Probar | |
| url() | a:hover{cursor:url("custom.cur"), default;} | Probar |
También puede tener un cursor completamente personalizado.
La propiedad cursor maneja una lista separada por comas de valores de cursor definidos por el usuario, seguido deCursor universal. Si el primer cursor especificado es incorrecto o no se encuentra, se utilizará el siguiente cursor de la lista separado por comas, y así sucesivamente, hasta encontrar un cursor disponible.
Si no hay cursor definido por el usuario válido o no es compatible con el navegador, se utilizará el cursor universal al final de la lista.
Consejo:El formato estándar utilizado para los cursores es el formato .cur. Sin embargo, puede usar software de conversión de imágenes gratuito en línea para convertir imágenes como .jpg y .gif a formato .cur.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}Prueba aquí‹/›En el ejemplo anterior, custom.gif y custom.cur son archivos de cursor personalizado que se han subido a su espacio de servidor, y default es el cursor universal. Si el cursor personalizado se pierde o el navegador del explorador no lo admite, se utilizará el cursor universal.
Advertencia:Si desea declarar un cursor personalizado, debe definirse al final de la listaCursor universalDe lo contrario, el cursor personalizado no se presentará correctamente.
Esta es una demostración en vivo del cursor personalizado.
Nota: IE9Y las versiones anteriores solo admiten valores de URL estáticos de cursor .cur y animaciones de cursor .ani. Sin embargo, navegadores como Firefox, Chrome y Safari admiten .cur, .png, .gif y .jpg, pero no .ani.