Advertisement
  1. Web Design
  2. CSS
Webdesign

Consejo rápido: Cómo manipular la apariencia del cursor con CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Muhamad Zulfiqor (you can also view the original English article)

En este Consejo rápido, aprenderemos cómo personalizar el aspecto del cursor con CSS. Va estar cambiando nuestro cursor en las flechas para facilitar una presentación más fácil. Para entender mejor, se camina a través de dos ejemplos separados.

Nota: el objetivo de este artículo no es cubrir exhaustivamente la sintaxis de la propiedad cursor. Para un examen más a fondo, asegúrese de comprobar los recursos al final del tutorial.

Ejemplo #1

Para el primer ejemplo, discutiremos cómo cambiar la imagen del cursor dependiendo de la posición del ratón.

Aquí está la demo que vamos a construir en acción:

1. el código HTML

Comenzamos con una imagen simple:

2. el CSS

A continuación, definimos dos clases CSS que sostienen las imágenes de cursor:

Observe que para cada regla especificamos dos declaraciones de cursor. La primera declaración de cada regla apunta a los navegadores de Microsoft, mientras que el segundo dirige a otros navegadores. Todos los valores de punto en una imagen, con el valor de clave de auto como un.

Cabe mencionar que podemos especificar más de un URL personalizado o imagen. Tratará de un navegador cargar en el orden definido en los valores. En otras palabras, inicialmente intentará cargar la primera imagen. Si esa imagen no está disponible por alguna razón, intentará cargar el otro y así sucesivamente. Por último, si ninguna de las imágenes existen, se utilizará la palabra reserva.

Antes de continuar, vamos a destacar algunas limitaciones actuales (también según mis pruebas) y explicar por qué hemos creado dos declaraciones separadas:

  • Los navegadores de Microsoft sólo admiten CUR y ANI como formatos.
  • Los navegadores de Microsoft no permiten establecer el origen de la imagen del cursor. Si eso sucede, la imagen del cursor y el resto de la propiedad son ignorados. En nuestro caso, para los navegadores no Microsoft, fijamos el origen de la imagen del centro (las imágenes son de 32 x 32).

3. el JavaScript

Cuando todos los activos de página estén listos, se ejecuta la función init.

Dentro de esa función, primero recuperamos el ancho de la imagen.

A continuación, cada vez que pasa el cursor sobre la imagen, hacemos lo siguiente:

  • Obtiene la coordenada X del puntero del ratón en relación a la imágenes, no en relación con la ventana del navegador.
  • Eliminar todas las clases de la imagen.
  • Agregue la clase correspondiente a la imagen dependiendo de la posición del ratón. Si la posición del ratón excede el ancho de la imagen de la mitad, añadimos la clase cursor-siguiente, de lo contrario se agrega la clase cursor anterior.

El código responsable de este comportamiento es el siguiente:

Ejemplo #2

Para el segundo ejemplo, vamos a usar la demo en un post anterior. Echa un vistazo:

Aquí, la posición y apariencia de las flechas de navegación este aspecto:

The default appearance of the navigation arrows

Vamos a personalizarlos para navegación más fácil. Cada una de las flechas debe cubrir la mitad de la anchura del carrusel, y su altura debe ser igual a la altura del carrusel. Además, tomaremos ventaja de la propiedad cursor para configurar los iconos de las flechas.

The new appearance of the navigation arrows

Aquí está el CSS requiere:

Aviso que las imágenes de cursor provienen de nuestro ejemplo anterior. La única diferencia es que especificamos el valor de clave de movimiento como una suplencia en caso de que no se puede cargar la imagen asociada.

Aquí está el resultado:

Su desafío (si decide aceptarlo)

Esta técnica funciona bien en nuestro ejemplo, aparte de una cosa. Las flechas de navegación se apilan sobre el texto de las diapositivas, nos impide poder hacer clic en los botones de llamada a la acción.

Normalmente, podría ser una solución simple agregar un índice positivo de z a ese texto (y posición: relativo). Sin embargo, esta solución no funcionará porque el texto y las flechas están en diferentes contextos de apilamientos (uso el inspector navegador para verlo).

Otra vez, este problema se produce para nuestra demostración. En sus proyectos, su estructura puede diferir (por ejemplo, tiene sólo imágenes o el texto está por debajo de la imagen) y no puede afrontar esa cuestión. Además, usted probablemente usará otro carrusel con una marca diferente.

En cualquier caso, una manera de resolver ese problema es a través de JavaScript. Por lo tanto, cada vez que el cursor personalizado está dentro de los límites del objetivo botón/texto, la flecha asociada recibe un z-index negativo o desaparece.

¡Intenta averiguar este Hotfix usted mismo y publicar su solución en los comentarios!

de final

En esta sugerencia rápida, cubrimos cómo manipular la apariencia del cursor con CSS. Como vimos, esto puede ser desafiante ya que no todos los navegadores admiten la misma sintaxis, pero al agregar estilos al cursor, podemos mejorar la experiencia del usuario.

Más lectura

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.