Wenn der Hilfetext in etwas Aktiveres geändert wird (z. B. „Als Lösung markieren“ statt „Lösung“), habe ich kürzlich festgestellt, dass sowohl nicht akzeptierte als auch akzeptierte Antworten denselben Hilfetext und damit auch dasselbe Symbol verwenden. Ich habe mich gefragt, ob es möglich wäre, separate Zustände für Antworten zu haben, die noch nicht akzeptiert wurden, und für Antworten, die als Lösung markiert sind, wie hier:
Schaltflächenzustand, wenn eine Antwort nicht ausgewählt wurde:
Ich denke, die Benutzer könnten davon profitieren, Hilfetexte zu sehen, die eine Aktion vorschlagen, anstatt des Standardtextes „Lösung“. Wenn eine Antwort ausgewählt wird, wäre es hilfreich, eine klare Rückmeldung als Ergebnis ihrer Auswahl zu sehen.
Zusätzlich könnten kontextbezogene Hover-Zustände hilfreich sein, um zu verstehen, was die Schaltfläche tun wird, anstatt sich auf das Alt-Attribut des Browsers zu verlassen. Siehe Beispiele unten.
Akzeptieren einer Lösung:
Entfernen einer zuvor ausgewählten Antwort:
Gibt es Pläne, solche Interaktionen zu implementieren?
Ich füge eine CSS-Lösung hinzu, falls diese hilfreich ist.
Mit Pseudo-Elementen kann zumindest das Verhalten des Textteils nachgeahmt werden:
Dieser Code ist semantisch etwas verschachtelt, aber er funktioniert. Die Textausrichtung müsste geändert oder die Breite des Buttons angepasst werden, damit das Ziel beim Überfahren mit der Maus nicht springt.
Es ist auch möglich, dies zu tun, was zum Text „Auswählen, wenn diese Antwort das Problem löst“ führen würde, der zu lang ist, aber Sprachübersetzungen respektieren sollte.
&:after {
content: attr(title);
}
Idealerweise würde ich das eigentliche HTML ändern, um Übersetzungen zu unterstützen, anstatt Pseudo-Elemente zu verwenden.
Außer dem Titel-Attribut (wenn es kürzer wäre) kann es besser sein als ein JS-Hover-Listener.
ich teste diese Lösung und habe eine Frage. Wenn man der ursprüngliche Poster ist, wird ein zusätzliches Button-Label an das DOM gesendet: Als Lösung markieren, was zu einer Duplizierung mit dieser Lösung führt. Haben Sie Vorschläge, wie ich damit umgehen kann? Soll ich das Button-Label einfach in CSS ausblenden?
Mir ist auch aufgefallen, dass es keine einfache Möglichkeit gibt, die Schaltflächen linksbündig auszurichten, damit sie beim Überfahren mit der Maus nicht springen. Die einzige Lösung, die ich gefunden habe, ist das Hinzufügen einer Breite zur Schaltfläche, was wahrscheinlich weniger ideal ist, da es sich nicht um ein Element mit fester Breite handelt. Haben Sie vielleicht noch andere Vorschläge dazu?
Es ist am besten, beide Maßnahmen zu kombinieren, da die Schaltfläche unendlich springt, wenn der Cursor am Ende eines nicht fixierten Elements bleibt, wenn sich der Text ändert.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // passt die Schaltfläche nach links an
.widget-button {
width: 200px; // auf einen Wert setzen, der den maximalen Text abdeckt
}
}
}
}
Sie könnten die Hover-Hintergrundfarbe ausblenden und einen anderen Ansatz verwenden, um den Hover anzuzeigen, wenn gewünscht.
Hallo @tynaut, danke für deine Hilfe und deinen Beitrag.
Gibt es eine Möglichkeit, die \u003cuse href\u003e-Eigenschaft zu ändern, um das Symbol für die verschiedenen Zustände (ausgewählte Antwort, beim Überfahren mit der Maus usw.) zu ändern?
