# 未采纳和已采纳回复的不同状态（文本和图标）

**URL:** <https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039>\
**Category:** UX\
**Tags:** solved\
**Created:** [2023年十二月8日 23:50 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039 "2023-12-08T23:50:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DorisHo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dorisho/32/302235_2.png) [@DorisHo](https://meta.discourse.org/u/DorisHo)\
**Post date:** [2023年十二月8日 23:50 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/1 "2023-12-08T23:50:06Z")

</div>

当将帮助文本更改为更具操作性的文本时（例如，“标记为解决方案”而不是“解决方案”），我最近发现未接受和已接受的答案都使用相同的帮助文本，并且由扩展名，图标相同。我想知道是否可以为尚未接受答案和已将响应标记为解决方案的情况设置单独的状态，如下所示：

未选择答案时按钮状态：

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/6/6/a66de25c20566bc013fcc009447b450947f43aac.png)

选择后，已接受答案的按钮状态。

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/b/2/bb20d4ec5051dbc1bbe381935b10fbb00a3c7c48.png)

我认为用户可以从看到建议操作的帮助文本中受益，而不是默认的“解决方案”文本。选择答案后，看到一些明显的反馈将很有帮助。

此外，上下文悬停状态也有助于理解按钮的作用，而不是依赖于浏览器的 alt 属性，请参阅下面的示例。

接受解决方案：  
 ![Accept Solution Hover and Selection demo](https://global.discourse-cdn.com/meta/original/4X/2/3/8/2383146432186e3a7441e36b0c56a0340b2d0207.gif)

删除先前选择的答案：  
 ![Deselect Solution Hover and Selection demo](https://global.discourse-cdn.com/meta/original/4X/7/a/c/7ac558aa85ab5ea1ae1f0bfb4f1ccf69ba6090de.gif)

是否有计划实现此类交互？

---

<div class="post-metadata">

**Author:** ![tynaut](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tynaut/32/276689_2.png) [@tynaut](https://meta.discourse.org/u/tynaut)\
**Post date:** [2023年十二月9日 01:06 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/2 "2023-12-09T01:06:16Z")

</div>

我将添加一个 CSS 解决方案，以防它有所帮助。

使用伪元素，至少可以模仿文本部分的行为：

![CleanShot 2023-12-08 at 18.56.34](https://global.discourse-cdn.com/meta/original/4X/9/8/f/98fba991f141a4fc237523497e4973f4587fba06.gif)

这段代码在语义上嵌套得有点深，但它有效。文本对齐方式需要更改，或者按钮的宽度需要固定，这样目标就不会在悬停时跳动。

> **css**
>
> ```plaintext
> 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”，虽然太长但应该尊重语言翻译。

```plaintext
&::after {
    content: attr(title);
}

```

* * *

理想情况下，我会更改实际的 HTML 以支持翻译，而不是使用伪元素；  
除了 title 属性（如果它更短），这可能比拥有一个 js 悬停监听器更好。

---

<div class="post-metadata">

**Author:** ![Karen\_Kitchens](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karen_kitchens/32/335020_2.png) [@Karen\_Kitchens](https://meta.discourse.org/u/Karen_Kitchens)\
**Post date:** [2023年十二月14日 16:21 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/3 "2023-12-14T16:21:39Z")

</div>

您好 @tynaut，

我正在测试此解决方案，有一个问题。当用户是原始发帖人时，会有一个额外的按钮标签发送到 DOM  
`<span class="d-button-label">Mark as solution</span>`，这会与此解决方案产生重复。您有什么建议如何处理这个问题吗？我应该只在 CSS 中隐藏按钮标签吗？

谢谢！

 ![Screenshot 2023-12-14 at 10.19.52 AM](https://global.discourse-cdn.com/meta/original/4X/6/2/b/62b1be86ae359cc85b8642084baa26e4c45aada3.png)

---

<div class="post-metadata">

**Author:** ![Karen\_Kitchens](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karen_kitchens/32/335020_2.png) [@Karen\_Kitchens](https://meta.discourse.org/u/Karen_Kitchens)\
**Post date:** [2023年十二月14日 16:37 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/4 "2023-12-14T16:37:13Z")

</div>

您好 @tynaut，

我也注意到没有简单的方法可以将按钮左对齐，这样鼠标悬停时它们就不会跳动。我找到的唯一解决方案是为按钮添加宽度，考虑到它不是固定宽度的元素，这可能不太理想。您是否有其他建议？

 ![Screenshot 2023-12-14 at 10.34.54 AM](https://global.discourse-cdn.com/meta/original/4X/6/d/b/6db0f310fe1894af38136472293527214ab594f7.png)

---

<div class="post-metadata">

**Author:** ![tynaut](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tynaut/32/276689_2.png) [@tynaut](https://meta.discourse.org/u/tynaut)\
**Post date:** [2023年十二月14日 16:57 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/5 "2023-12-14T16:57:57Z")

</div>

> [@Karen\_Kitchens](#):
>
> 我还注意到，没有简单的方法可以将按钮左对齐，这样它们在悬停时就不会跳动。

最好同时结合这两种措施，因为如果光标停留在非固定元素的末尾而文本发生变化，按钮将无限期地跳动。

```plaintext
nav.post-controls {
    .actions {
        width: 100%;
        .extra-buttons {
            margin-right: auto; // 将按钮调整到左侧
            .widget-button {
                width: 200px; // 设置为覆盖最大文本的值
            }
        }
    }
}

```

![CleanShot 2023-12-14 at 10.51.55](https://global.discourse-cdn.com/meta/original/4X/5/2/c/52c914eb49b46fd789132dad6bb360d2a092783a.gif)

如果需要，您可以隐藏悬停背景色并采用不同的方法来指示悬停。

---

<div class="post-metadata">

**Author:** ![tynaut](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tynaut/32/276689_2.png) [@tynaut](https://meta.discourse.org/u/tynaut)\
**Post date:** [2023年十二月14日 17:00 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/6 "2023-12-14T17:00:21Z")

</div>

DOM 文本可以设置为 `font-size: 0;`。

伪元素（以及 .d-icon 类）需要指定它们的 font-sizes，因为它们是会继承该属性的子元素。

---

<div class="post-metadata">

**Author:** ![DorisHo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dorisho/32/302235_2.png) [@DorisHo](https://meta.discourse.org/u/DorisHo)\
**Post date:** [2024年一月19日 21:25 UTC](https://meta.discourse.org/t/different-states-text-and-icon-for-unaccepted-and-accepted-responses/288039/8 "2024-01-19T21:25:21Z")

</div>

嘿 @tynaut，感谢您的帮助和建议。

我们能否更改 `use href` 属性来更改不同状态（选定答案、悬停等）的图标？