Share
En esta sugerencia rápida, aprenderemos cómo personalizar la apariencia del cursor con CSS. Cambiaremos nuestro cursor en flechas para facilitar la navegación por una presentación de diapositivas. Para entenderlo mejor, veremos dos ejemplos separados..
Nota: el objetivo de este artículo no es cubrir exhaustivamente el cursor sintaxis de la propiedad. Para un examen más completo, asegúrese de revisar los recursos al final del tutorial.
Para el primer ejemplo, discutiremos cómo cambiar la imagen del cursor dependiendo de la posición del mouse.
Aquí está la demostración que vamos a construir en acción:
Comenzamos con una imagen simple:
A continuación, definimos dos clases de CSS que contienen las imágenes del cursor:
.cursor-prev cursor: url (cursor-prev.cur), auto; / * IE & Edge * / cursor: url (cursor-prev.svg) 16 16, auto; / * Resto de los navegadores * / .cursor-next cursor: url (cursor-next.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Los navegadores de descanso * /
Tenga en cuenta que para cada regla especificamos dos declaraciones de cursor. La primera declaración de cada regla apunta a los navegadores de Microsoft, mientras que la segunda apunta a otros navegadores. Todos los valores apuntan a una imagen, con el auto valor de la palabra clave como una alternativa.
Vale la pena mencionar que podemos especificar más de una URL o imagen personalizada. Un navegador intentará cargarlos según el orden definido en los valores. En otras palabras, inicialmente intentará cargar la primera imagen. Si esa imagen no está disponible por algún motivo, intentará cargar la segunda, y así sucesivamente. Finalmente, si no existe ninguna de las imágenes, se utilizará la palabra clave alternativa..
Antes de continuar, destacemos algunas limitaciones actuales (también de acuerdo con mis pruebas) y expliquemos por qué establecemos dos declaraciones separadas:
Cuando todos los recursos de la página están listos, en eso la función es ejecutada.
Dentro de esa función, primero recuperamos el ancho de la imagen..
A continuación, cada vez que pasamos el ratón sobre la imagen, hacemos lo siguiente:
Accentsconagua
cursor-next clase, de lo contrario el cursor-prev se agrega la clase.El código responsable de todo este comportamiento es el siguiente:
window.addEventListener ("load", init); function init () const img = document.querySelector ("img"); const ancho = img.getBoundingClientRect (); const halfImgWidth = ancho / 2; img.addEventListener ("mousemove", function (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("cursor-prev", "cursor-next"); if (xPos> halfImgWidth) this.classList.add ("cursor-next"); else this.classList.add ("cursor-prev");); Para el segundo ejemplo, usaremos la demostración incorporada en una publicación anterior. Echar un vistazo:
Aquí, la posición y el aspecto de las flechas de navegación se ven así:
Vamos a personalizarlos para facilitar la navegación. Cada una de las flechas debe cubrir la mitad del ancho del carrusel, y su altura debe ser igual a la altura del carrusel. Además, nos aprovecharemos de la cursor Propiedad para configurar los íconos de las flechas..
Aquí está el CSS requerido:
.owl-carousel .owl-nav [class * = owl-] position: absolute; arriba: 0; abajo: 0; ancho: 50%; margen: 0; .owl-carrusel .owl-nav .owl-prev izquierda: 0; cursor: url (cursor-prev.cur), mover; cursor: url (cursor-prev.svg) 16 16, mover; .owl-carrusel .owl-nav .owl-next derecha: 0; cursor: url (cursor-next.cur), mover; cursor: url (cursor-next.svg) 16 16, mover; .owl-carousel .owl-nav svg display: none;
Observe que las imágenes del cursor provienen de nuestro ejemplo anterior. La única diferencia es que especificamos el movimiento valor de la palabra clave como reserva en caso de que la imagen asociada no se pueda cargar.
Aquí está el resultado:
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, lo que impide que podamos hacer clic en los botones de llamada a la acción.
Normalmente, una solución simple podría ser agregar un positivo índice z a ese texto (y dale posición: relativo). Sin embargo, esta solución no funcionará porque el texto y las flechas están en diferentes contextos de apilamiento (use el inspector del navegador para verlo).
Una vez más, ese problema se produce para nuestra demo. En sus proyectos, su estructura puede diferir (por ejemplo, solo tiene imágenes o el texto está debajo de la imagen) y es posible que no enfrente ese problema. Además, es probable que uses otro carrusel con un marcado diferente..
En cualquier caso, una forma de resolver ese problema es a través de JavaScript. Por lo tanto, cada vez que el cursor personalizado se encuentra dentro de los límites del botón / texto de destino, la flecha asociada recibe un signo negativo. índice z o desaparece.
Intente resolver este problema usted mismo y publique su solución en los comentarios!
En este consejo rápido, tratamos 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.
cursor Propiedad en el Módulo de Interfaz de Usuario Básico CSS Nivel 3 (CSS3 UI) 