En réponse à le hollandais volant.

J’avais lu aussi l’option blur mais comme je suis pas du tout au point en JS je sais pas ce que ça vaut ni ce que c’est…
Mais l’idée du compteur est vraiment pas bête !

En réponse à le hollandais volant.

J’avoue avoir complètement zappé le :not
Le problème c’est que sa prise en charge est assez hasardeuse en fonction des navigateurs, c’est un peu ce qui m’embête aussi du coup.
Mais je sais, si on résonne comme ça, on ne fait plus de CSS à cause de IE (troll gratuit évidemment).
Mais je vais tenter ! Merci du rappel !

Pour le JS, il y a une façon simple : il suffit de mettre un « flag » sur l’élément. Ce flag est modifié au .mouseover() ET au .focus(), et il contient la date (à la seconde près) où il a été activé.

Si la souris se :hover à t=1 et que le clavier vient ensuite faire un :focus à t=2, le focus prend le dessus : vu qu’il a été fait après.

Si le clic a été fait avec la souris, les événements de .mouseover() et de .focus() sont quasi-simultanés : on détecte donc un clic/hover souris et non un truc au clavier.

Au besoin, on calculera la durée entre les deux actions, et on mettra une durée raisonnable après laquelle on considère que les deux actions sont d’origines différentes (souris ou clavier).

En pratique, j’aurais :
– au hover/mouseover : on met le flag avec (dans les attributs « data-* ») : element.dataset.mouseOverAt = new Date().toTimeString()
– avec le focus : on lit la valeur et on compare avec la Date() actuelle (c’est précis à la µs). Si >50ms : alors le :hover et le :focus sont décorrélés et on assume que le focus vient du clavier : on annule le flag : element.dataset.mouseOverAt = 0;

En CSS, on applique le style seulement si le flag vaut 0 :

element[data-mouse-over-at= »0″] { background: red; }

(c’est sûrement pas idéal, mais c’est une idée)

input:focus:not(:hover) { … }

Évidemment, si la souris se trouve au dessus de l’élément par hasard, ça ne marchera pas (c’est la limite). Mais pour un lien ou un bouton, relativement petits (donc rarement :hover par hasard), ça devrait aller. C’est plutôt pour les gros champs texte que ça pose problème.

Une autre approche, davantage rétro-compatible, c’est ça :

input:focus { background: red; } /* rouge au focus */
input:hover { background: white; } /* remis à blanc (ou par défaut) au hover */

Ça devrait marcher, je pense : le style du « hover » est prioritaire sur le « focus » si on l’écrit dans cet ordre.

(là encore, on a le même problème qu’avant avec un pointeur se trouvant par hasard au dessus d’un lien, mais il n’utilise pas de « :not() » supporté depuis seulement quelques années).