62 votes

Différences entre CSS3 :hover et :focus ?

El Document CSS3 parle de :hover et de :focus, qui me semblent être exactement les mêmes. Quelles sont les différences entre les deux ? Qu'est-ce que je ne vois pas ?

Merci !

1 votes

:hover y :focus ont été introduits en CSS niveau 2, et leurs spécifications n'ont pas été modifiées en CSS3.

80voto

Marc B Points 195501

Le survol est "vrai" lorsque le pointeur de la souris se trouve sur un élément. Focus est vrai si le curseur est dans cet élément. Il est possible que le survol soit faux et le focus vrai (par exemple, cliquer dans un champ de texte puis déplacer la souris).

6 votes

Oui, j'avais oublié l'action "cliquer-déplacer-la-souris". Et aussi la possibilité d'utiliser la tabulation pour accéder à un champ. Merci.

4 votes

Pour éviter toute confusion : "curseur" signifie ici "caret". :)

0 votes

Pour être complet : Tous les contrôles n'ont pas un point d'insertion lorsqu'ils sont focalisés. Les liens et les boutons peuvent également avoir un point d'insertion.

12voto

recursive Points 34729

:hover s'applique à tout élément sur lequel le curseur de la souris se trouve actuellement. :focus fait référence au focus du formulaire, et est l'élément de formulaire actuel avec le focus. En gros, si vous commencez à taper, quel élément allez-vous remplir ?

8voto

Vishal Nagda Points 679

La différence entre :hover y :focus est :

:hover lorsque le pointeur de votre souris se trouve sur l'élément.

:focus lorsque vous sélectionnez un élément, celui-ci est mis en évidence.

Plus d'informations : Pseudo-classes CSS à W3Schools

1voto

spender Points 51307

Le survol ne s'applique que lorsque le dispositif de pointage est au-dessus de l'élément. La documentation est très claire à ce sujet.

1voto

chumego Points 11

Le survol peut être ajouté avec des pourcentages en % avec un timing de transition avec la nouvelle technologie css3. A l'exception d'IE9, tous les principaux navigateurs les supporteront. voici quelques exemples de deux menus de navigation pour comprendre le survol et l'animation au survol et aussi le fondu des couleurs dans l'attribut css3 hover. `

0 votes

J'ai supprimé vos liens non divulgués vers votre propre blog. Veuillez consulter la section Autopromotion de la FAQ avant de poster d'autres réponses.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X