当将帮助文本更改为更具操作性的文本时（例如，“标记为解决方案”而不是“解决方案”），我最近发现未接受和已接受的答案都使用相同的帮助文本，并且由扩展名，图标相同。我想知道是否可以为尚未接受答案和已将响应标记为解决方案的情况设置单独的状态，如下所示：
未选择答案时按钮状态：
选择后，已接受答案的按钮状态。
我认为用户可以从看到建议操作的帮助文本中受益，而不是默认的“解决方案”文本。选择答案后，看到一些明显的反馈将很有帮助。
此外，上下文悬停状态也有助于理解按钮的作用，而不是依赖于浏览器的 alt 属性，请参阅下面的示例。
接受解决方案：
删除先前选择的答案：
是否有计划实现此类交互？
我将添加一个 CSS 解决方案，以防它有所帮助。
使用伪元素，至少可以模仿文本部分的行为：
这段代码在语义上嵌套得有点深，但它有效。文本对齐方式需要更改，或者按钮的宽度需要固定，这样目标就不会在悬停时跳动。
nav.post-controls .actions button {
&::after {
margin-left: 0.5em;
}
&.unaccepted {
&::after {
content: "Mark as solution";
}
&:hover {
&::after {
content: "Select solution";
}
}
}
&.accepted {
&, .d-icon {
color: var(--tertiary);
}
&::after {
content: "Selected Solution";
}
&:hover {
&, .d-icon {
color: var(--primary);
}
&::after {
content: "Deselect Solution";
}
}
}
}
也可以这样做，这将导致文本“Select if this reply solves the problem”，虽然太长但应该尊重语言翻译。
&::after {
content: attr(title);
}
理想情况下，我会更改实际的 HTML 以支持翻译，而不是使用伪元素；
除了 title 属性（如果它更短），这可能比拥有一个 js 悬停监听器更好。
您好 @tynaut，
我正在测试此解决方案，有一个问题。当用户是原始发帖人时，会有一个额外的按钮标签发送到 DOM
<span class="d-button-label">Mark as solution</span>，这会与此解决方案产生重复。您有什么建议如何处理这个问题吗？我应该只在 CSS 中隐藏按钮标签吗？
谢谢！
最好同时结合这两种措施，因为如果光标停留在非固定元素的末尾而文本发生变化，按钮将无限期地跳动。
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // 将按钮调整到左侧
.widget-button {
width: 200px; // 设置为覆盖最大文本的值
}
}
}
}
如果需要，您可以隐藏悬停背景色并采用不同的方法来指示悬停。
DOM 文本可以设置为 font-size: 0;。
伪元素（以及 .d-icon 类）需要指定它们的 font-sizes，因为它们是会继承该属性的子元素。
嘿 @tynaut，感谢您的帮助和建议。
我们能否更改 use href 属性来更改不同状态（选定答案、悬停等）的图标？