Como cambiar el cursor del mouse al hacer onrollover

septiembre 3, 2016 1:50 pm Publicado por Deja tus comentarios

Cambiar el cursor cuando el usuario pasa el mouse por encima de un elemento es una excelente “buena práctica” para mejorar la experiencia de los usuarios en nuestras aplicaciones web. El principal objetivo con esto más allá de hacer visualmente más atractiva la navegación, es comunicar visualmente el contexto del contenido con el que están interactuando.

Lograr esto con CSS es tan sencillo como agregar la propiedad cursor y el tipo de cursor que queremos utilizar de esta manera:

.elemento{
  cursor: pointer;
}

Sin embargo en más de una oportunidad no solo necesitamos señalar que un elemento puede ser clickable, sino también necesitamos denotar que el elemento se puede mover o que solamente esta mostrando información extra sobre el elemento al pasar el mouse por encima, etc.

Así que para su referencia y despúes de que varios de ustedes lo venían pidiendo, acá les dejo un listado de las posibilidades:

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

Seguimos aportando al conocimiento colectivo. Crowd Knowledge!

Categorizado en:

Esta entrada fue escrita porAndrei Olea