Cursor - Trucos CSS | Almanaque CSS 2024

La cursorpropiedad en CSS controla cómo se verá el cursor del mouse cuando esté ubicado sobre el elemento en el que se establece esta propiedad. Obviamente, solo es relevante en navegadores / sistemas operativos en los que hay un mouse y un cursor. Se utilizan esencialmente para UX para transmitir la idea de cierta funcionalidad. Así que trata de no romper esa posibilidad.

Hay muchos de ellos:

.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; )

El cursor también puede ser una imagen:

.custom ( cursor: url(images/my-cursor.png.webp), auto; )

Algunos cursores exclusivos de WebKit:

-webkit-zoom-in -webkit-zoom-out -webkit-zoom-grab -webkit-zoom-grabbing

Más información

Módulo de interfaz de usuario básica CSS Nivel 3
Documentos de Mozilla

Soporte de navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
5	4	9	14	5

Móvil / Tablet

Android Chrome	Android Firefox	Androide	Safari de iOS
88	No	81	No

Y para valores más nuevos, como zoom-iny zoom-out:

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.