Atoz CSS Screencast: la classe Pseudo survole

Points de base

:hover La pseudo-classe est un outil pratique pour fournir des commentaires visuels lorsque la souris plane sur des liens et des boutons. Il peut être conçu de diverses manières, comme changer la couleur, la taille ou l'orientation d'un élément. Cependant, sa fiabilité sur les dispositifs tactiles n'est pas cohérente et ne doit pas être utilisée pour masquer les informations critiques. D'autres pseudo-classes peuvent être utilisées pour définir des styles de différents états de liens, tels que :visited pour les liens dans l'historique du navigateur d'utilisateurs, :active pour les liens cliqués, et :focus pour ceux actuellement dans le lien de mise au point du clavier. Ceux-ci peuvent être combinés dans une feuille de style de réinitialisation pour définir les valeurs par défaut du projet. :hover La pseudo-classe peut également être utilisée pour créer des menus déroulants dans la navigation principale du site Web. Cela implique de changer la propriété display du sous-menu lorsqu'il oscille sur l'élément de menu supérieur. Pour que cette interaction fonctionne bien sur un appareil tactile, vous pouvez utiliser JavaScript pour convertir l'événement de survol en un événement de clic. Résumé des explications vidéo

Cette vidéo explorera l'application de :hover pseudo-classes dans les liens texte et introduira d'autres pseudo-classes de liens. De plus, certaines des lacunes de :hover et des solutions pour les utilisateurs non de souris seront discutées. Enfin, nous créerons un menu déroulant CSS déclenché par :hover et utiliserons jQuery pour améliorer la compatibilité du dispositif tactile.

Style de liaison

:hover L'utilisation la plus courante peut être de fournir des commentaires visuels pour les utilisateurs lorsque leur souris sur les liens et les boutons.

le :hover le statut

du lien peut être défini à l'aide de CSS comme suit: a:hover { color: red; } a le :enabled après le côlon représente une pseudo-classe. Dans cette vidéo et le reste de cette série, nous couvrirons de nombreuses classes de pseudo - vous pouvez voir les pseudo-classes :disabled et

dans "Episode 5: ID Selector".

Dans cet exemple, seul le style de couleur est défini, mais tous les attributs peuvent être modifiés, écrasés ou annulés. Si nécessaire, vous pouvez augmenter la taille de la police et faire pivoter le lien de 180 degrés - mais cela n'est pas recommandé.

Il existe également d'autres pseudo-classes qui peuvent être utilisées pour styliser différents états de liens. :visited :active utilisé pour styliser les liens de l'historique du navigateur de l'utilisateur. :focus utilisé pour styliser le lien qui clique actuellement.

Utilisé pour styliser le lien qui a actuellement une mise au point du clavier - c'est-à-dire que l'utilisateur utilise la touche Tab pour sauter sur des éléments cliquables (tels que les liens et les entrées de formulaire) sur la page.

J'aime combiner ces quatre états de liaison dans le cadre de la réinitialisation de la feuille de style pour définir des valeurs par défaut raisonnables pour l'ensemble du projet. a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Inconvénients

Le statut :hover :hover peut être appliqué à n'importe quel élément, pas seulement des liens, ce qui les rend très universels. Mais sur le dispositif tactile, il n'y a pas de souris pour activer

. Si l'utilisateur touche un lien ou un bouton, le style :hover est parfois appliqué, mais cela n'est pas fiable et incohérent sur toutes les plates-formes et les appareils. Cela peut souvent être très déroutant et notre travail consiste à améliorer l'expérience utilisateur, pas à aggraver les choses!

Pour les appareils tactiles, évitez de cacher des informations critiques derrière les interactions :hover . Si vous ne pouvez pas le faire, vous pouvez remplacer :hover par un événement de clic à l'aide de JavaScript.

Certains utilisateurs ne peuvent pas utiliser la souris, et nous pouvons améliorer leur expérience en appliquant toujours des styles :hover et :focus lors de l'utilisation de :active . Nous pouvons les séparer avec des virgules dans CSS comme suit:

a:hover { color: red; } Si vous utilisez un préprocesseur CSS comme SASS, vous pouvez créer un mixin qui sortira ces trois pseudo-classes séparées par des virgules sans les écrire à chaque fois.

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Le style basé sur l'état sera désormais affiché lors des interactions du clavier avec des éléments focalisés ou activatables.

Menu déroulant CSS

Nous avons vu l'utilisation de base de :hover pour fournir des commentaires visuels lors de l'interaction avec les liens et les boutons. Un autre modèle de conception commun sur le Web est le menu déroulant dans la navigation principale du site Web.

Nous pouvons utiliser :hover pour interagir en utilisant des sélecteurs CSS plus complexes pour afficher et masquer le sous-menu. Pour que cette interaction fonctionne bien sur les appareils tactiles, une petite quantité de JavaScript est nécessaire pour convertir l'événement :hover en un événement de clic, mais nous le couvrirons plus tard.

L'astuce consiste à changer l'attribut du sous-menu lorsqu'il oscille sur l'élément de menu supérieur. Étant donné que display est un sélecteur CSS, il peut être combiné avec d'autres sélecteurs pour créer un comportement plus complexe. Pour plus d'informations sur les attributs :hover , consultez "Episode 4: Show". display

Dans cet exemple, j'ai une liste de liens non ordonnée horizontalement avec un sous-menu sous chaque lien. Le sous-menu est une autre liste non ordonnée, mais les éléments de la liste sont empilés les uns sur les autres.

Ce CSS définit cette disposition initiale. Les propriétés de couleur et de police ont été déplacées vers mon fichier pour garder la zone de travail soignée. page-styles.css

a:hover, a:focus, a:active { /* styles */ } Vous pouvez utiliser pour masquer le sous-menu et le définir sur display: none lors de la survol de l'élément de menu. display: block

@mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } } Cela montrera tout le sous-menu, mais nous pouvons ajuster ce sélecteur pour limiter l'affichage et la cachette d'un seul sous-menu en utilisant le sous-menu . Pour plus d'informations à ce sujet et à d'autres sélecteurs combinés, consultez l'épisode précédent sur les sélecteurs de frère universel. >

.menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; } Si vous préférez que le sous-menu soit moins soudain ou caché, vous pouvez combiner avec opacity pour un effet de fondu plus progressif. Je vais le laisser comme un exercice et vous laisser l'essayer vous-même - créez un codep et tweetez-moi; transition

Pour que ce menu déroulant fonctionne correctement sur le périphérique tactile, nous pouvons ajouter du javascript. Cet extrait jQuery activera le menu déroulant lorsqu'il est cliqué au lieu de planer;

a:hover { color: red; } Des exemples de travail contenant ce menu de dispositif tactile jQuery peuvent être trouvés sur Codepen.

FAQ

Quelle est la différence entre :hover , :focus et :active pseudo-classes dans CSS? :hover , :focus et :active sont tous des pseudo-classes dans CSS qui sont appliquées à différentes interactions utilisateur. :hover Le pseudo-classe se tire lorsque l'utilisateur plane sur l'élément sans l'activer. :focus La pseudo-classe est appliquée lorsqu'un élément se concentre, généralement par l'utilisateur cliquant sur l'élément d'entrée ou naviguant vers lui à l'aide du clavier. :active La pseudo-classe est appliquée immédiatement lorsque l'utilisateur active un élément (comme cliquer sur un lien ou un bouton).

Comment utiliser :hover pseudo-classe pour différents éléments? :hover Les pseudo-classes peuvent être utilisées avec n'importe quel élément HTML, pas seulement les liens. Il peut être utilisé pour modifier l'apparence des boutons, des champs de formulaire, des images et d'autres éléments sur lesquels l'utilisateur plane sa souris. Par exemple, vous pouvez modifier la couleur d'arrière-plan du bouton sur lequel l'utilisateur plane la souris en utilisant le CSS suivant:

a { color: blue; } a:hover { color: lightblue; } a:visited { color: darkblue; } a:focus { outline: 1px dotted grey; } a:active { color: lightblue; } Les plusieurs pseudo-classes peuvent-elles être combinées ensemble? Oui, vous pouvez relier plusieurs pseudo-classes ensemble pour créer des sélecteurs plus spécifiques. Par exemple, vous pouvez combiner les pseudo-classes :hover :focus

a:hover, a:focus, a:active { /* styles */ } Comment les pseudo-classes sont-elles utilisées avec des appareils tactiles? :hover Sur le dispositif tactile, il n'y a pas de concept de survol car il n'y a pas de curseur. Cependant, certains périphériques tactiles déclenchent le pseudo-classe lorsque l'utilisateur touche un élément. Si vous ne faites pas attention, cela peut conduire à un comportement inattendu, alors assurez-vous de toucher le dispositif lors de la conception d'un effet. :hover :hover Puis-je utiliser le

pseudo-classe avec l'animation CSS? :hover Oui, vous pouvez utiliser les pseudo-classe pour déclencher des animations CSS. Cela peut être utilisé pour créer des visuels intéressants lorsque l'utilisateur plane sur un élément. Par exemple, vous pouvez utiliser le pseudo-classe pour définir l'animation de couleur du lien: :hover Dans cet exemple, lorsque l'utilisateur plane dessus, la couleur du lien passera en douceur du bleu au rouge. :hover

Cette sortie révisée fournit une version plus complète et paraphrasée de l'entrée, en maintenant la signification d'origine et les positions d'image.

Atoz CSS Screencast: la classe Pseudo survole

Articles Liés