Share
Dans cette astuce, nous allons apprendre à personnaliser l'apparence du curseur avec CSS. Nous allons changer notre curseur en flèches pour faciliter la navigation dans un diaporama. Pour mieux le comprendre, nous allons passer en revue deux exemples distincts..
Remarque: le but de cet article n'est pas de couvrir de manière exhaustive les le curseur syntaxe de la propriété. Pour un examen plus approfondi, assurez-vous de consulter les ressources à la fin du tutoriel..
Pour le premier exemple, nous verrons comment changer l'image du curseur en fonction de la position de la souris.
Voici la démo que nous allons construire en action:
Nous commençons avec une image simple:
Ensuite, nous définissons deux classes CSS qui contiennent les images du curseur:
.curseur-prev curseur: url (curseur-prev.cur), auto; / * IE & Edge * / cursor: url (cursor-prev.svg) 16 16, auto; / * Navigateurs restants * / .cursor-next cursor: url (cursor-next.cur), auto; / * IE & Edge * / cursor: url (cursor-next.svg) 16 16, auto; / * Reste les navigateurs * /
Notez que pour chaque règle, nous spécifions deux déclarations de curseur. La première déclaration de chaque règle cible les navigateurs de Microsoft, tandis que la seconde cible les autres navigateurs. Toutes les valeurs pointent sur une image, avec le auto valeur de mot clé comme solution de secours.
Il est à noter que nous pouvons spécifier plusieurs URL ou images personnalisées. Un navigateur essaiera de les charger en fonction de l'ordre défini dans les valeurs. En d’autres termes, initialement, il essaiera de charger la première image. Si cette image n'est pas disponible pour une raison quelconque, il essaiera de charger la seconde, et ainsi de suite. Enfin, si aucune des images n’existe, le mot-clé fallback sera utilisé.
Avant de poursuivre, soulignons quelques limitations actuelles (également en fonction de mes tests) et expliquons pourquoi nous avons défini deux déclarations distinctes:
Lorsque tous les éléments de la page sont prêts, le init la fonction est exécutée.
A l'intérieur de cette fonction, nous récupérons d'abord la largeur de l'image.
Ensuite, chaque fois que nous survolons l'image, nous procédons comme suit:
Accentsconagua
curseur suivant classe, sinon le curseur-prev la classe est ajoutée.Le code responsable de tout ce comportement est le suivant:
window.addEventListener ("load", init); function init () const img = document.querySelector ("img"); const width = img.getBoundingClientRect (); const halfImgWidth = width / 2; img.addEventListener ("mousemove", fonction (e) const xPos = e.pageX - img.offsetLeft; this.classList.remove ("curseur-prev", "curseur-suivant"); if (xPos> halfImgWidth) this.classList.add ("cursor-next"); else this.classList.add ("cursor-prev");); Pour le deuxième exemple, nous utiliserons la démo intégrée dans un post précédent. Regarde:
Ici, la position et l'apparence des flèches de navigation ressemblent à ceci:
Personnalisons-les pour faciliter la navigation. Chacune des flèches doit couvrir la moitié de la largeur du carrousel et sa hauteur doit être égale à la hauteur du carrousel. De plus, nous allons profiter de la le curseur propriété pour définir les icônes des flèches.
Voici le CSS requis:
.owl-carrousel .owl-nav [classe * = owl-] position: absolute; en haut: 0; en bas: 0; largeur: 50%; marge: 0; .owl-carrousel .owl-nav .owl-prev gauche: 0; curseur: url (curseur-prev.cur), déplacer; curseur: url (curseur-prev.svg) 16 16, déplacer; .owl-carrousel .owl-nav .owl-next right: 0; curseur: url (curseur-next.cur), déplacer; curseur: url (curseur-suivant.svg) 16 16, déplacer; .owl-carrousel .owl-nav svg display: none;
Notez que les images du curseur proviennent de notre exemple précédent. La seule différence est que nous spécifions le bouge toi valeur de mot clé comme solution de secours au cas où l'image associée ne pourrait pas être chargée.
Voici le résultat:
Cette technique fonctionne bien dans notre exemple, à part une chose. Les flèches de navigation sont empilées au-dessus du texte des diapositives, nous empêchant de cliquer sur les boutons d'appel à l'action..
Normalement, une solution simple pourrait être d'ajouter un positif z-index à ce texte (et lui donner position: relative). Cependant, cette solution ne fonctionnera pas car le texte et les flèches se trouvent dans des contextes d'empilement différents (utilisez l'inspecteur du navigateur pour le voir).
Encore une fois, ce problème se pose pour notre démo. Dans vos projets, votre structure peut différer (par exemple, vous n’avez que des images ou le texte se trouve sous l’image) et vous ne pouvez pas faire face à ce problème. De plus, vous utiliserez probablement un autre carrousel avec un balisage différent..
Dans tous les cas, un moyen de résoudre ce problème consiste à utiliser JavaScript. Ainsi, chaque fois que le curseur personnalisé se trouve dans les limites du bouton / texte cible, la flèche associée reçoit un négatif. z-index ou disparaît.
Essayez de résoudre ce problème vous-même et publiez votre solution dans les commentaires.!
Dans cette astuce, nous avons expliqué comment manipuler l'apparence du curseur avec CSS. Comme nous l'avons vu, cela peut être difficile, car tous les navigateurs ne prennent pas en charge la même syntaxe, mais en ajoutant des styles au curseur, nous pouvons améliorer l'expérience utilisateur..
le curseur propriété dans le module d'interface utilisateur de base CSS niveau 3 (interface utilisateur CSS3) 