ヘルプテキストをより具体的なアクションを示すもの（例：「解決策としてマーク」対「解決策」）に変更したところ、未承認の回答と承認済みの回答の両方で同じヘルプテキストと、それに伴って同じアイコンが使用されていることを最近発見しました。回答がまだ選択されていない状態と、回答が解決策としてマークされた状態に対して、以下のような別々の状態を持たせることは可能でしょうか。
回答が選択されていない場合のボタンの状態：
回答が選択された後の、承認済み回答のボタンの状態。
回答が選択された場合、デフォルトの「解決策」テキストよりも、アクションを示唆するヘルプテキストの方がユーザーの役に立つと思います。回答が選択されたら、その選択の結果として明確なフィードバックが表示されると役立つでしょう。
さらに、ブラウザの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";
}
}
}
}
これも可能です。これにより、「この返信が問題を解決した場合は選択してください」というテキストが表示されますが、長すぎますが、言語翻訳は尊重されるはずです。
:after {
content: attr(title);
}
理想的には、疑似要素ではなく、翻訳をサポートするために実際の HTML を変更します。
タイトル属性（短ければ）を除けば、JS ホバーリスナーを持つよりも優れている可能性があります。
Hi @tynaut 様
このソリューションをテストしており、質問があります。元の投稿者がいる場合、DOMに送信される追加のボタンラベルがあります。
Mark as solution
これは、このソリューションとの重複を生み出します。これに対処する方法について何か提案はありますか？ CSSでボタンラベルを非表示にすればよいでしょうか？
ありがとうございます！
Hi @tynaut 様
ボタンを左揃えにする簡単な方法がなく、ホバー時にボタンがジャンプしないようにできないことにも気づきました。見つけた唯一の解決策は、ボタンに幅を追加することですが、これは固定幅の要素ではないため、おそらく理想的ではありません。他に何か提案はありますでしょうか？
両方の対策を組み合わせるのが最善です。なぜなら、テキストが変更されたときにカーソルが固定されていない要素の末尾にとどまった場合、ボタンは無限にジャンプするからです。
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // ボタンを左に調整
.widget-button {
width: 200px; // 最大テキストをカバーする値に設定
}
}
}
}
ホバー時の背景色を非表示にして、ホバーを示すために別の方法を使用することもできます。
DOM テキストは font-size: 0; に設定できます。
疑似要素（および .d-icon クラス）は、それらがプロパティを継承する子要素になるため、font-sizes を指定する必要があります。
@tynautさん、ご協力とご意見ありがとうございます。
\u003cuse href\u003e プロパティを変更して、さまざまな状態（選択された回答、ホバー時など）のアイコンを変更する方法はありますか？