Propiedad CSS cursor

La propiedad cursor define el tipo de cursor del mouse cuando el puntero está sobre el elemento.

El cursor se define como cero o más valores <url> separados por comas, seguidos de un valor de palabra clave. Cada uno de estos <url> debe indicar un archivo de imagen. El navegador recurrirá a la siguiente imagen si no puede cargar la primera imagen especificada. Si el navegador no encuentra ninguna imagen, recurrirá al valor de palabra clave.

INFO

Los navegadores modernos admiten grab, grabbing, zoom-in y zoom-out sin prefijos de proveedor.

Initial Value	auto
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.cursor = "cell";

Sintaxis

Sintaxis de la propiedad CSS cursor

css

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Ejemplo de la propiedad cursor:

Ejemplo de la propiedad CSS cursor con los valores auto y help

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Try it Yourself »

Aquí tienes un ejemplo con todos los valores de la propiedad cursor. Los navegadores modernos admiten estos valores sin prefijos de proveedor.

Ejemplo de la propiedad cursor con los valores "zoom-in", "zoom-out", "grab" y "grabbing":

Ejemplo de la propiedad CSS cursor con todos los valores

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .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;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad cursor con el valor "url":

Ejemplo de la propiedad cursor con la url

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("https://es.w3docs.com/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Try it Yourself »

Valores

Value	Description	Play it
auto	Significa que el navegador establecerá un cursor. Es el valor predeterminado de esta propiedad.	Play it »
default	Es el cursor predeterminado.	Play it »
none	Significa que no se renderiza ningún cursor para el elemento.	Play it »
context-menu	El cursor indica que hay un menú contextual disponible.	Play it »
help	El cursor indica que hay ayuda disponible.	Play it »
pointer	El cursor indica un enlace como puntero.	Play it »
progress	El cursor indica que el programa está ocupado o en progreso.	Play it »
wait	El cursor indica que el programa está ocupado.	Play it »
cell	Significa que el cursor indicará que se puede seleccionar una celda o un conjunto de celdas.	Play it »
crosshair	El cursor se mostrará como una mira.	Play it »
text	El cursor indica texto que puede seleccionarse.	Play it »
`<url>`	Una lista de URLs separadas por comas para cursores personalizados.	Play it »
vertical-text	El cursor indica texto vertical que puede seleccionarse.	Play it »
alias	Significa que el cursor indicará que se creará un alias de algo.	Play it »
copy	El cursor indica algo que puede copiarse.	Play it »
move	El cursor indica que algo puede moverse.	Play it »
no-drop	El cursor indica que el elemento arrastrado no puede soltarse aquí.	Play it »
not-allowed	El cursor indica que la acción solicitada no se ejecutará.	Play it »
all-scroll	Significa que el cursor indicará que algo puede desplazarse en cualquier dirección.	Play it »
col-resize	El cursor indica que la columna puede redimensionarse horizontalmente.	Play it »
row-resize	El cursor indica que la fila puede redimensionarse verticalmente.	Play it »
n-resize	El cursor indica que un borde de una caja debe moverse hacia arriba.	Play it »
s-resize	El cursor indica que un borde de una caja debe moverse hacia abajo.	Play it »
e-resize	El cursor indica que un borde de una caja debe moverse hacia la derecha.	Play it »
w-resize	El cursor indica que un borde de una caja debe moverse hacia la izquierda.	Play it »
ns-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Play it »
ew-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Play it »
ne-resize	El cursor indica que un borde de una caja debe moverse hacia arriba y a la derecha.	Play it »
nw-resize	El cursor indica que un borde de una caja debe moverse hacia arriba y a la izquierda.	Play it »
se-resize	El cursor indica que un borde de una caja debe moverse hacia abajo y a la derecha.	Play it »
sw-resize	El cursor indica que un borde de una caja debe moverse hacia abajo y a la izquierda.	Play it »
nesw-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Play it »
nwse-resize	El cursor indica un cursor de redimensionamiento bidireccional.	Play it »
zoom-in	El cursor indica que algo puede ampliarse.	Play it »
zoom-out	El cursor indica que algo puede reducirse.	Play it »
grab	El cursor indica que algo puede agarrarse.	Play it »
grabbing	El cursor indica que un elemento se está arrastrando actualmente.	Play it »
initial	Hace que la propiedad use su valor predeterminado.	Play it »
inherit	Hereda la propiedad del elemento padre.

Practice

What does the CSS 'cursor' property specify in web design?

It specifies the type of cursor to be displayed when pointing over an element.It specifies the color of the cursor when pointing over an element.It specifies the size of the cursor when pointing over an element.It affects the behavior of the cursor when interacting with text or graphical elements.

Propiedad CSS cursor ​

Sintaxis ​

Ejemplo de la propiedad cursor: ​

Ejemplo de la propiedad cursor con los valores "zoom-in", "zoom-out", "grab" y "grabbing": ​

Ejemplo de la propiedad cursor con el valor "url": ​

Valores ​

Practice ​

Propiedad CSS cursor

Sintaxis

Ejemplo de la propiedad cursor:

Ejemplo de la propiedad cursor con los valores "zoom-in", "zoom-out", "grab" y "grabbing":

Ejemplo de la propiedad cursor con el valor "url":

Valores

Practice