33 - Definir un cursor para un elemento HTML.



Problema:

Disponer una lista ordenada con los nombres de los valores que puede adoptar la propiedad cursor. Luego definir dicho cursor para cada valor de propiedad.
Recordemos que la propiedad cursor puede adoptar los siguientes valores:

crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ol>
<li id="elemento1">crosshair</li>
<li id="elemento2">default</li>
<li id="elemento3">pointer</li>
<li id="elemento4">move</li>
<li id="elemento5">e-resize</li>
<li id="elemento6">ne-resize</li>
<li id="elemento7">nw-resize</li>
<li id="elemento8">n-resize</li>
<li id="elemento9">se-resize</li>
<li id="elemento10">sw-resize</li>
<li id="elemento11">s-resize</li>
<li id="elemento12">w-resize</li>
<li id="elemento13">text</li>
<li id="elemento14">wait</li>
<li id="elemento15">help</li>
<li id="elemento16">auto</li>
</ol>
</body>
</html>
#elemento1 {
  cursor: crosshair;
}

#elemento2 {
  cursor: default;
}

#elemento3 {
  cursor: pointer;
}

#elemento4 {
  cursor: move;
}

#elemento5 {
  cursor: e-resize;
}

#elemento6 {
  cursor: ne-resize;
}

#elemento7 {
  cursor: nw-resize;
}

#elemento8 {
  cursor: n-resize;
}

#elemento9 {
  cursor: se-resize;
}

#elemento10 {
  cursor: sw-resize;
}

#elemento11 {
  cursor: s-resize;
}

#elemento12 {
  cursor: w-resize;
}

#elemento13 {
  cursor: text;
}

#elemento14 {
  cursor: wait;
}

#elemento15 {
  cursor: help;
}

#elemento16 {
  cursor: auto;
}
Ver solución


Retornar