Petit problème : la zone de sortie de la souris d'un bouton est plus petite que la zone d'entrée de la souris

UX
1

Étapes :

  • Déplacez votre curseur sur un bouton.
  • Éloignez légèrement votre curseur du bouton, mais pas plus loin que le bouton entier.
  • L’état de survol du bouton disparaît alors. Si vous ramenez votre curseur à l’intérieur du bouton, l’état de survol ne s’affichera pas.

chrome_DC8p8WGM55

Remarque : le bouton fonctionne toujours, malgré l’absence de l’état de survol. C’est juste un détail visuel qui me dérange un peu.

2 « J'aime »
2

Cela ne semble pas être un problème… Je pense que c’est juste l’effet de survol en CSS qui disparaît après quelques secondes, c’est une animation. Il suffit de changer le CSS.

3

L’effet ne disparaît pas si je garde le curseur de la souris sur le bouton.

image

Si le curseur entre dans la zone verte, le bouton obtient la classe d-hover qui met en surbrillance tout le bouton, comme prévu.

Mais dès que le curseur quitte la zone rouge (essayez de placer le curseur de la souris entre « Répondre » et la flèche à sa gauche :smile:), le bouton entier perd sa classe d-hover. Il ne devrait pas. La classe d-hover ne devrait disparaître que lorsque le curseur quitte la zone verte (ou si le bouton n’est plus focalisé).

4 « J'aime »
4

Question rapide : si je voulais essayer de déboguer cela, devrais-je regarder

ou pensez-vous que le problème vient d’un autre script ?

5

Bonjour,

Je pense que c’est quelque chose que vous pouvez changer avec du CSS. Depuis le JS, il semble qu’il cible le button.widget-button et ajoute la classe .d-hover lors de mouseenter. Mais lorsque vous déplacez le curseur sur l’icône et que vous revenez en arrière, il quitte la classe ciblée et supprime la classe .d-hover. Ou quelque chose comme ça :slightly_smiling_face:

Essayez quelque chose comme ceci sur Desktop / CSS

nav.post-controls {
  .actions button {
    .d-icon,
    .d-button-label {
      pointer-events: none;
    }
  }
}

Sep-02-2022 09-07-02

1 « J'aime »
6

C’est à la fois astucieux et intelligent :smile:
J’espère que cela n’interférera pas plus que prévu avec l’interface de Discourse.

J’aimerais comprendre la raison sous-jacente de ce comportement, qui se produit sur n’importe quel bouton, pas seulement sur les contrôles de publication.

1 « J'aime »
7

Remplacement de « mouseenter » par « mouseover » ici :

Résout le problème, mais je ne suis pas sûr si cela a des conséquences indésirables ou non.
Je n’ai rencontré aucun problème à première vue.

Je suppose que je laisserai les développeurs voir s’il s’agit d’une correction appropriée ou non.