Kleines Problem: Der Maus-Ausbereich einer Schaltfläche ist kleiner als der Maus-Einbereich

UX
1

Schritte:

  • Bewegen Sie den Cursor über eine Schaltfläche.
  • Bewegen Sie den Cursor ein wenig von der Schaltfläche weg, aber nicht weiter als die gesamte Schaltfläche.
  • Der Hover-Zustand der Schaltfläche verschwindet dann. Wenn Sie den Cursor wieder in die Schaltfläche hineinbewegen, wird der Hover-Zustand nicht angezeigt.

chrome_DC8p8WGM55

Hinweis: Die Schaltfläche funktioniert trotz des nicht aktiven Hover-Zustands immer noch. Es ist nur eine visuelle Sache, die mich ein wenig stört.

2 „Gefällt mir“
2

Das scheint kein Problem zu sein. Ich glaube, es ist nur der Hover-Effekt in CSS, der nach ein paar Sekunden verschwindet, es ist eine Animation. Muss nur das CSS ändern.

3

Der Effekt verschwindet nicht, wenn ich den Mauszeiger auf der Schaltfläche lasse.

image

Wenn der Cursor in den grünen Bereich gelangt, erhält die Schaltfläche die Klasse d-hover, die die gesamte Schaltfläche hervorhebt, wie erwartet.

Aber sobald der Cursor den roten Bereich verlässt (versuchen Sie, den Mauszeiger zwischen „Antworten“ und dem Pfeil daneben links zu platzieren :smile:), verliert die gesamte Schaltfläche ihre d-hover-Klasse. Das sollte sie nicht. Die d-hover-Klasse sollte nur verschwinden, wenn der Cursor den grünen Bereich verlässt (oder wenn die Schaltfläche nicht mehr fokussiert ist).

4 „Gefällt mir“
4

Kurze Frage: Wenn ich versuchen würde, das zu debuggen, sollte ich mir das hier ansehen:

oder denkst du, dass das Problem von einem anderen Skript stammt?

5

Hallo,

Ich glaube, das ist etwas, das Sie mit CSS ändern können. Aus dem JS scheint es, dass es auf button.widget-button abzielt und die Klasse .d-hover bei mouseenter hinzufügt. Aber wenn Sie den Cursor über das Symbol und zurück bewegen, wird die Klasse .d-hover entfernt. Oder so ähnlich :slightly_smiling_face:

Versuchen Sie so etwas auf dem Desktop / CSS

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

Sep-02-2022 09-07-02

1 „Gefällt mir“
6

Das ist sowohl hacky als auch clever :smile:
Ich hoffe, es wird die Benutzeroberfläche von Discourse nicht mehr als erwartet beeinträchtigen.

Ich möchte den zugrunde liegenden Grund für dieses Verhalten verstehen, das bei jeder Schaltfläche auftritt und nicht nur bei den Beitragssteuerelementen.

1 „Gefällt mir“
7

Ersetzen von „mouseenter“ durch „mouseover“ hier:

Löst das Problem, aber ich bin mir nicht sicher, ob es unerwünschte Nebenwirkungen hat oder nicht.
Ich bin auf den ersten Blick auf keine Probleme gestoßen.

Ich gehe davon aus, dass ich die Entwickler entscheiden lasse, ob es eine richtige Lösung ist oder nicht.