La propiedad del cursor se usa para especificar el cursor del mouse que se mostrará al señalar un elemento . Esta propiedad se define con cero o más valores de <url> separados por comas seguidos de 1 valor de palabra clave como obligatorio y cada <url> apuntará al archivo de imagen.
Sintaxis:
cursor: value;
Valores de propiedad:
- auto: esta es la propiedad predeterminada donde el navegador establece un cursor.
- alias: Esta propiedad se utiliza para mostrar la indicación del cursor de algo que se va a crear.
- all-scroll: En esta propiedad, el cursor indica desplazamiento.
- celda: en esta propiedad, el cursor indica que se ha seleccionado una celda o un conjunto de celdas.
- menú contextual: en esta propiedad, el cursor indica que hay un menú contextual disponible.
- col-resize: En esta propiedad, el cursor indica que la columna se puede redimensionar horizontalmente.
- copiar: en esta propiedad, el cursor indica que algo se va a copiar.
- punto de mira: en esta propiedad, el cursor se representa como una cruz.
- predeterminado: el cursor predeterminado.
- e-resize: en esta propiedad, el cursor indica que un borde de un cuadro se debe mover hacia la derecha.
- ew-resize: en esta propiedad, el cursor indica un cursor de cambio de tamaño bidireccional.
- ayuda: En esta propiedad, el cursor indica que hay ayuda disponible.
- mover: en esta propiedad, el cursor indica que algo se debe mover
- n-resize: en esta propiedad, el cursor indica que se debe mover hacia arriba un borde de un cuadro.
- ne-resize: en esta propiedad, el cursor indica que un borde de un cuadro se debe mover hacia arriba y hacia la derecha.
- nesw-resize: esta propiedad indica un cursor de cambio de tamaño bidireccional.
- ns-resize: esta propiedad indica un cursor de cambio de tamaño bidireccional.
- nw-resize: en esta propiedad, el cursor indica que un borde de un cuadro se moverá hacia arriba y hacia la izquierda.
- nwse-resize: esta propiedad indica un cursor de cambio de tamaño bidireccional.
- no-drop: en esta propiedad, el cursor indica que el elemento arrastrado no se puede soltar aquí.
- ninguno: esta propiedad indica que no se representa ningún cursor para el elemento.
- not-allowed: En esta propiedad el cursor indica que no se ejecutará la acción solicitada.
- puntero: en esta propiedad, el cursor es un puntero e indica enlace
- progreso: En esta propiedad, el cursor indica que el programa está ocupado.
- row-resize: En esta propiedad, el cursor indica que la fila se puede redimensionar verticalmente.
- s-resize: en esta propiedad, el cursor indica que se debe mover hacia abajo un borde de un cuadro.
- se-resize: en esta propiedad, el cursor indica que un borde de un cuadro se debe mover hacia abajo y hacia la derecha.
- sw-resize: en esta propiedad, el cursor indica que un borde de un cuadro se debe mover hacia abajo y hacia la izquierda.
- texto: En esta propiedad, el cursor indica texto que se puede seleccionar.
- URL: en esta propiedad, una lista separada por comas de URL para cursores personalizados y un cursor genérico al final de la lista.
- texto-vertical: En esta propiedad, el cursor indica texto-vertical que se puede seleccionar.
- w-resize: en esta propiedad, el cursor indica que un borde de un cuadro se debe mover hacia la izquierda.
- esperar: En esta propiedad, el cursor indica que el programa está ocupado.
- zoom-in: En esta propiedad, el cursor indica que algo puede ser ampliado.
- zoom-out: En esta propiedad, el cursor indica que algo se puede alejar.
- initial: esta propiedad se utiliza para establecer su valor predeterminado.
- heredar: hereda de su elemento padre.
Ejemplo: Este ejemplo ilustra el uso de la propiedad del cursor y su valor se establece en espera , lo que indica que el programa está ocupado.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | cursor property </title>
<style>
.wait {
cursor: wait;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="wait">wait</p>
</center>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0
- Microsoft Edge 12.0
- MozillaFirefox 1.0
- IE 4.0
- Ópera 7.0
- safari1.2
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA