cursor CSS. Tipos. Efectos hover: move, no-drop, resize, not-allowed, crosshair, progress, wait. (CU01054D)

Resumen: Entrega nº54 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01054D

 

 

CURSOR CSS

CSS permite modificar el símbolo que se muestra como puntero cuando se sitúa el puntero del ratón sobre una superficie mediante la propiedad cursor. Aunque no siempre se usa, esta propiedad permite generar algunos efectos visuales atractivos y hacer más amigable la navegación.

css

 

El motivo por el que resulta de mayor interés esta propiedad es porque combinada con técnicas de programación puede servir para generar efectos dinámicos indicativos de acciones del usuario como “elemento que se puede seleccionar o arrastrar” o “proceso en ejecución” cambiando la forma del puntero del ratón. También se puede usar sin combinar con programación, pero las posibilidades que tendremos para aplicar esta propiedad serán más limitadas.

La propiedad cursor es habitual aplicarla en combinación con hover para cambiar el aspecto del puntero cuando el usuario se posiciona en determinados lugares de la página web, aunque se puede aplicar a un elemento sin necesidad de hacerlo en combinación con hover.

 

 

PROPIEDAD CURSOR

La forma más directa para entender esta propiedad es viendo una imagen con los tipos más habituales de punteros que se pueden mostrar.

cursor css tipos

 

PROPIEDAD CSS cursor
Función de la propiedad Permite definir el aspecto del puntero que se muestra en pantalla.
Valor por defecto Auto
Aplicable a Todos los elementos
Valores posibles para esta propiedad auto (el navegador determina el aspecto)
url (rutaDeLaImagenDeseada) [Se pueden especificar varias urls separadas por comas por si no es posible cargar una se intenta cargar la siguiente y un valor predefinido final por si no es posible cargar ninguna url)
Una palabra clave predefinida indicadora de un tipo general: auto, default (puntero básico de defecto, usualmente una flecha), none (no muestra puntero)
Una palabra clave predefinida indicadora de un tipo de status: context-menu, help, pointer, progress, wait
Una palabra clave predefinida indicadora de un tipo de selección: cell, crosshair, text, vertical-text
Una palabra clave predefinida indicadora de un tipo de arrastrar y soltar: alias, copy, move, no-drop, not-allowed
Una palabra clave predefinida indicadora de redimensionamiento o scrolling: all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize
Una palabra clave predefinida indicadora de zoom: zoom-in, zoom-out
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myBox {cursor: url(CU01048D_1.png), wait;}
.myBoxT2 { cursor: help;}

 

 

Prueba el resultado de usar la propiedad cursor CSS escribiendo el código que mostramos a continuación y visualizándolo en tu navegador. Ten en cuenta que algunas palabras clave no son reconocidas por algunos navegadores (cuanto más antiguo sea el navegador menos palabras clave reconocerá):

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border-style:solid; border-width:1px;
height: 95px; width: 240px;
margin:10px; background-color:yellow;
font-size: 24px; text-align:center;}
</style>
</head>
<body>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="cursor: url(http://cursors2.totallyfreecursors.com/thumbnails/mickey-mouse2.gif), wait;">Url (wait si falla) </div>
<div style="cursor:none;">none </div>
<div style="cursor:context-menu;">context-menu (falla en varios navegadores) </div>
<div style="cursor:help;">help </div>
<div style="cursor:pointer;">pointer </div>
<div style="cursor:progress;">progress </div>
<div style="cursor:wait;">wait </div>
<div style="cursor:cell;">cell </div>
<div style="cursor:crosshair;">crosshair </div>
<div style="cursor:text;">text </div>
<div style="cursor:row-resize;">row-resize </div>
</div>

<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="cursor:alias;">alias </div>
<div style="cursor:copy;">copy </div>
<div style="cursor:move;">move </div>
<div style="cursor:no-drop;">no-drop </div>
<div style="cursor:not-allowed;">not-allowed </div>
<div style="cursor:all-scroll;">all-scroll </div>
<div style="cursor:col-resize;">col-resize </div>
<div style="cursor:s-resize;">s-resize </div>
<div style="cursor:nwse-resize;">nwse-resize </div>
<div style="cursor:zoom-in;">zoom-in </div>
<div style="cursor:zoom-out;">zoom-out </div>
</div>
</body>
</html>

 

 

EJERCICIO

Crea un documento HTML y un archivo con la hoja de estilos CSS que cumpla con estos requisitos:

a) Deben exisitir dos contenedores (div1, div2) situados en horizontal, cada uno con margin 25px en todas direcciones, sin relleno, ancho de 200 píxeles, altura de 300 píxeles y borde sólido de 5 píxeles de anchura con color de borde violeta.

b) El div 1 debe contener un texto con varios links (etiqueta <a> de html). Al pasar el cursor sobre cualquiera de los links dentro del div1 el cursor deberá ponerse en modo help (es decir, se verá un pequeño interrogante junto al cursor).

c) El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles. La imagen debe a su vez ser un link a otro documento HTML al que denominamos documento 2 y que debe abrirse en una nueva pestaña cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen el cursor deberá ponerse en modo zoom-in, es decir, mostrar una lupa con un pequeño + en su interior.  En el documento 2 debemos tener la misma imagen pero con mayor tamaño, por ejemplo 600 píxeles de anchura. Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones.

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación