Peut-on réaliser un hover temporisé en css ?

Bonjour,

Afin de ne pas trop charger une page html, j'utilise des textes complémentaires que je fais apparaître à l'aide du pseudo-élément :hover.

L'inconvénient est que ces compléments apparaissent de façon fugitive lorsqu'on déplace le pointeur à travers l'écran, ce qui est assez inconfortable. (Il ne s'agit pas de petites popups mais de plages de texte occupant une part non négligeable de la page. Ces apparitions fugitives sont de ce fait bien visibles.)

Existe-t-il un moyen d'afficher un complément après seulement un certain temps (par exemple une demi-seconde) de façon à filtrer les mouvements rapides du pointeur ?

De même, existe-t-il un moyen de faire disparaître le complément un certain temps après la sortie du pointeur hors la zone de survol ?

Merci d'avance pour votre aide.
Modifié par cadbor (22 Dec 2013 - 00:40)

Bonjour,

Je suppose que tu parles de "surcharge visuelle" ?
Il faut parfois rester dans le "classique" afficher/masquer en JavaScript, via un lien "lire la suite", "en savoir plus", etc...
Le survol ne fonctionne pas sur tout type de support (en mobilité par exemple), ce n'est pas super intuitif, la temporisation que tu souhaites obtenir ne s'adresse qu'aux zappeurs fous de la souris qui ne représentent probablement qu'une partie de ton auditoire, l'information supplémentaire peut donc échapper à une grosse partie de tes visiteurs

Tu pourras sans doute jouer sur le timing des transitions d'un état à un autre, en association avec les dimensions du contenu masqué, l'opacité, la couleur, mais encore une fois, tu risques de ne pas capter un certain nombre de visiteurs qui visiteraient sur ton site avec des navigateurs un peu anciens, n'interprétant pas certaines déclarations CSS, et masquer pour de bon ces informations complémentaires.

Je te conseille donc, a priori (n'ayant pas vu tes pages), de t'orienter vers une solution JavaScript, c'est mon avis, et je le partage

Je te remercie de ta réponse.

Je prévois effectivement de traiter ces compléments en Javascript.

L'affichage en survol traité en CSS ne sera utilisé que dans le cas, semble-t-il de plus en plus rare, où Javascript est désactivé.

Dans ce cas, une petite temporisation — reste à trouver comment la réaliser en CSS — permettra de réduire un peu l'inconfort relatif généré par ces apparitions fugitives lorsqu'on déplace rapidement la souris.

Mais peut-être l'enjeu n'en vaut pas la chandelle si la proportion des postes sur lesquels JS est désactivé devient réellement négligeable. (Je m'adresse exclusivement à un public d'entreprises.)
Est-ce vraiment le cas actuellement ?

Re,

:hover à utiliser avec son copain :focus quoi qu'il en soit
Un article intéressant chez l'ami Raphaël
Js désactivé est une légende urbaine trop répandue
Dans la réalité, il me semble qu'il s'agit principalement d'utilisateurs qui savent pertinemment ce qu'ils font.
Pour un public d'entreprises, il peut effectivement y avoir un risque (minime mais...)

Quoi qu'il en soit, si tu as conscience que la méthode CSS peut être problématique, pas inter-opérable, qu'elle peut nuire à l'ergonomie et à l'accessibilité, tu trouveras sans peine des explications sur le net pour parvenir à tes fins, ici par exemple, pour y adjoindre cette notion de temporisation, comme déjà indiqué, voire du côté des transitions en CSS3, voire les animations via les keyframes...

[Edith] fôtes
Modifié par 6l20 (23 Dec 2013 - 17:56)

Bonjour,

Grâce à un excellent article sur un non moins excellent site dont le nom se termine par "s"
www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
j'ai pu me familiariser avec les possibilités offertes par les fonctions de transition de CSS3.

Je pense effectivement que ces fonctions répondent à ma question.
D'autre part, je vais aussi apprendre à les utiliser pour donner un peu d'animation au site que j'élabore.

Merci donc du (des) conseil(s).l


PS : Si je peux me permettre un petit cours académique, en espérant ne pas te froisser :
"Quoi qu'il en soit" s'écrit en deux mots.

"Quoique" (en un seul mot) = "bien que" :
"Quoiqu'il fût d'origine étrangère, il maîtrisait parfaitement les subtilités de la langue française."

"Quoi que" (en deux mots) = "Quelle que soit l'action effectuée" :
"Quoi qu'il fasse, il n'arrive pas à maîtriser les subtilités de la langue française."

Le même type d'erreur se rencontre souvent avec "quelque" (y compris sur des affiches 4 m x 5 m):

"Quels que soient ses efforts, il n'arrive pas à maîtriser les subtilités de la langue française."
(et non "Quelque soit ses efforts...")
Dans ce sens "quel" et "soit" s'accordent en genre et en nombre :
"Quel que soit le désir de bien faire, ...",
"Quelle que soit la volonté de bien faire, ..."
"Quels que soient les efforts pour bien faire, ..."
"Quelles que soient les résolutions pour bien faire, ..."

Mais (registre soutenu) :
"Quelque importants que soient ses efforts, il n'arrive pas à maîtriser les subtilités de la langue française."
(et non "Quelques")
"Quelque efforts qu'il puisse prodiguer, il n'arrive pas à maîtriser les subtilités de la langue française."
Modifié par cadbor (23 Dec 2013 - 11:36)

cadbor a écrit :
Bonjour,...
PS : Si je peux me permettre un petit cours académique, en espérant ne pas te froisser :
"Quoi qu'il en soit" s'écrit en deux mots.

Je n'ai aucune raison de m'offusquer de ce type de remarque, je suis d’ordinaire plutôt sensibilisé et je tente de prendre le temps de me relire par respect pour cette langue que j'adore, et pour mes modestes lecteurs, ce qui n'est pas toujours aisé...
Il y a parfois des fautes dont on ne parvient que très difficilement à se défaire, celle-ci en fait partie (et ce n'est pas la seule...), même si je connais la règle, même si avec un peu plus d'attention et de concentration, ...
Le cours académique n'est, cependant, pas totalement indispensable

Quoi qu'il en soit, je tacherai de faire plus attention à l'avenir, merci pour ce rappel
Modifié par 6l20 (23 Dec 2013 - 18:17)