input: un piège

Désolé pour celles et ceux qui ne s'intéressent pas à cet aspect des codes mais je cherche à comprendre et surtout à savoir comment utiliser cette caractéristique.

Je me suis fait piégé plusieurs fois avec cette caractéristique: lorsque vous modifiez un élément au clic, l'attribut concerné (ici, largeur) est bloqué et vous ne pouvez le modifier par un survol, par exemple.

Dans ce montage, le clic sur A modifie la largeur du carré vert et le survol  du carré vert aussi.

Si vous survolez d'abord le carré vert, il va s'élargir à 30vw.

Si vous cliquez sur A, le carré vert va s'agrandir à 20vw.

Si vous cliquez sur A puis survolez le carré vert, il ne changera pas de taille au survol.

Par contre, si vous cliquez sur A  puis cliquez sur le carré vert, il va s'agrandir à 30vw !

Ce qui semblerait dire que le clic modifie la commande au survol en commande au clic !

Si on ajoute un changement de couleur, uniquement au survol:

Le changement de couleur fonctionne avec les mêmes actions que ci-dessus.

Le clic sur B ne modifie que la taille du carré vert et son survol change sa couleur; en cliquant sur le carré devenu orange, il s'élargit à 30vw !

Si on ajoute un changement de couleur au survol et un autre au clic:

Le clic sur C agrandit le carré vert à 20vw et change sa couleur en bleu clair.
Le survol du carré vert l'agrandit à 30vw et change sa couleur en jaune.
Le carré bleu clair, cliqué passe à 30vw et en jaune !
Ce qui confirme bien que le clic d'abord modifie la commande au survol par une commande au clic, en conservant les attributs du survol.

Si on ajoute un déplacement uniquement au survol, il sera conservé au clic sur l'élément.

Curieusement, il semble que le survol soit converti en clic mais en sortant du survol, le montage revient au départ.

Cela devrait aider à utiliser ce genre de codes dans des montages.