Revista Blog

Cambiar el tipo de cursor al pasar el puntero por un link

Por Aizum Blog @aizumblog
Cambiar el tipo de cursor al pasar el puntero por un link
En éste tip, os voy a enseñar a implantar cursores de distintas formas y modelos, al pasar por encima el cursor o puntero de tu ratón en un enlace. Así, podrás añadir el tipo de cursor que desees, para la finalidad y función que desees advertir, haciendo uso de estos fantásticos cursores. Para ver los cursores que os he preparado, puedes ver a continuación, una serie de enlaces ficticios, con el nombre de la propiedad que desees elegir para tus enlaces en Blogger, por ejemplo, veamos los modelos y sus distintas funciones en acción, enjoy this:
crosshair
move
wait
progress
text
vertical-text
help
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
nw-resize
w-resize
not-allowed
no-drop
no-drop
row-resize
Ahora pondremos en acción la inserción de estos cursores variopintos en Blogger:
  1. Ves a Blogger
  2. Ingresa en plantilla
  3. Ahora en Editar Html
  4. Y busca con Ctrl+F la etiqueta ]]></b:skin>
  5. Y dentro de esa etiqueta, antes del cierre, en la sección CSS, busca esto: a:hover
  6. Abajo en el código CSS, deberás de poner el cursor: más la propiedad que deseas.
  7. El código CSS de abajo, es sólo un ejemplo, de implantación del cursor en el CSS.

a:hover {
cursor:wait;
color: #029fc4;
text-decoration:underline;
}

Y ya que estamos, en una imagen sería de está otra forma, que veremos:
<div style="text-align: center;">
<img style="cursor:pointer;cursor:move" src="URL-DE-IMAGEN" /></div>

Igualmente que en el link, remplaza Cursor: por la propiedad que desees, es decir, por ejemplo: Cursor: move; o Cursor:help; se entiende, no? espero que si. Y cómo es obvio, la ruta de la imagen, que desees añadir en el emplazamiento resaltado en el código HTML: "URL-DE-IMAGEN". No os dejo una demo de éste tip en una imagen, porqué ya tengo otro truco habilitado con la propiedad cursor, con otra función habilitada. Bueno espero que os haya sido de utilidad.
Get free premium widgets for your blog and website.

Volver a la Portada de Logo Paperblog