Definición de .cursor utilizado en CSS
La propiedad .cursor en CSS controla cómo se verá el mouse .cursor cuando se encuentra sobre el elemento en el que se establece esta propiedad. Obviamente, solo es relevante en los navegadores/sistemas operativos en los que hay un mouse y .cursor. Se usan esencialmente para UX para transmitir la idea de cierta funcionalidad. Así que trate de no romper esa posibilidad.
Caso de uso de la propiedad cursor
Esta propiedad de CSS habitualmente se utiliza de la siguiente manera:
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }Otro ejemplo más avanzado de .cursor es el siguiente de CODEPEN:
Sintaxis de .cursor en CSS
cursor: value;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| alias | El cursor indica que se va a crear un alias de algo. | |
| desplazamiento completo | El cursor indica que algo se puede desplazar en cualquier dirección | |
| auto | Defecto. El navegador establece un cursor. | |
| célula | El cursor indica que se puede seleccionar una celda (o conjunto de celdas) | |
| Menú de contexto | El cursor indica que hay un menú contextual disponible | |
| redimensionar col | El cursor indica que la columna se puede redimensionar horizontalmente | |
| Copiar | El cursor indica que algo se va a copiar. | |
| punto de mira | El cursor se representa como una cruz | |
| defecto | El cursor predeterminado | |
| e-cambiar tamaño | El cursor indica que un borde de un cuadro debe moverse hacia la derecha (este) | |
| ew-cambiar tamaño | Indica un cursor de cambio de tamaño bidireccional | |
| tomar | El cursor indica que se puede agarrar algo | |
| agarrando | El cursor indica que se puede agarrar algo | |
| ayuda | El cursor indica que hay ayuda disponible | |
| Muevete | El cursor indica que algo se va a mover. | |
| n-cambiar tamaño | El cursor indica que un borde de un cuadro se va a mover hacia arriba (norte) | |
| ne-cambiar el tamaño | El cursor indica que un borde de un cuadro debe moverse hacia arriba y hacia la derecha (norte/este) | |
| nuevo-cambiar tamaño | Indica un cursor de cambio de tamaño bidireccional | |
| ns-cambiar tamaño | Indica un cursor de cambio de tamaño bidireccional | |
| nw-cambiar tamaño | El cursor indica que un borde de un cuadro debe moverse hacia arriba y hacia la izquierda (norte/oeste) | |
| nwse-cambiar tamaño | Indica un cursor de cambio de tamaño bidireccional | |
| ninguna gota | El cursor indica que el elemento arrastrado no se puede soltar aquí | |
| ninguna | No se representa ningún cursor para el elemento. | |
| No permitido | El cursor indica que la acción solicitada no se ejecutará | |
| puntero | El cursor es un puntero e indica un enlace. | |
| Progreso | El cursor indica que el programa está ocupado (en curso) | |
| redimensionar fila | El cursor indica que la fila se puede redimensionar verticalmente | |
| s-cambiar tamaño | El cursor indica que un borde de un cuadro se va a mover hacia abajo (sur) | |
| cambiar el tamaño | El cursor indica que un borde de un cuadro debe moverse hacia abajo y hacia la derecha (sur/este) | |
| sw-cambiar tamaño | El cursor indica que un borde de un cuadro se va a mover hacia abajo y hacia la izquierda (sur/oeste) | |
| texto | El cursor indica el texto que se puede seleccionar | |
| URL | Una lista separada por comas de URL para 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 | |
| texto vertical | El cursor indica texto vertical que se puede seleccionar | |
| w-cambiar tamaño | El cursor indica que un borde de un cuadro debe moverse hacia la izquierda (oeste) | |
| Espere | El cursor indica que el programa está ocupado | |
| acercarse | El cursor indica que algo se puede acercar | |
| disminuir el zoom | El cursor indica que algo se puede alejar | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .cursor
Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| direction | 2.0 | 5.5 | 1.0 | 1.3 | 9.2 |
