Listado completo de tutoriales

33 - Definir un cursor para un elemento HTML.


Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a mostrar cuando la flecha del mouse se encuentra sobre el elemento HTML.

Los valores que podemos asignarle a esta propiedad cursor son:

crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto

Veamos un ejemplo para configurar la propiedad cursor para el elemento de tipo ancla (a):

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al que 
está definido por defecto:</p>
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.bing.com">bing.com</a>
</body>
</html>

La hoja de estilo es:

a {
  cursor:help;
}

Retornar