При изменении подсказки на более побуждающую к действию (например, «Отметить как решение» вместо «Решение») я недавно обнаружил, что и неотмеченные, и отмеченные ответы используют один и тот же текст подсказки и, соответственно, одну и ту же иконку. Мне интересно, возможно ли реализовать отдельные состояния для ответов, которые ещё не приняты, и для тех, которые отмечены как решение, как показано ниже:
Думаю, пользователям будет полезно видеть подсказку, предлагающую действие, вместо стандартного текста «Решение». Когда ответ выбран, было бы полезно видеть явную обратную связь в результате этого выбора.
Кроме того, контекстные состояния при наведении также могут помочь понять, что сделает кнопка, вместо того чтобы полагаться на атрибут alt браузера. См. примеры ниже.
Принятие решения:
Отмена ранее выбранного ответа:
Есть ли планы на реализацию подобных взаимодействий?
Добавляю решение на CSS, на случай если это окажется полезным.
С помощью псевдоэлементов можно хотя бы имитировать поведение для текстовой части:
Этот код немного семантически вложенный, но он работает. Необходимо будет изменить выравнивание текста или зафиксировать ширину кнопки, чтобы цель не скакала при наведении.
Также можно сделать вот так, что приведет к отображению текста «Выберите, если этот ответ решает проблему», который слишком длинный, но должен учитывать языковые переводы.
&:after {
content: attr(title);
}
В идеале я бы изменил сам HTML для поддержки переводов, вместо использования псевдоэлементов;
За исключением атрибута title (если бы он был короче), это может быть лучше, чем использование JS-прослушивателя наведения.
Я тестирую это решение и у меня возник вопрос. Когда пользователь является автором темы, в DOM отправляется дополнительная метка кнопки: Отметить как решение, что приводит к дублированию с этим решением. У вас есть предложения, как с этим справиться? Мне просто скрыть метку кнопки через CSS?
Я тоже заметил, что нет простого способа выровнять кнопки по левому краю, чтобы при наведении они не прыгали. Единственное решение, которое я нашел, — задать ширину кнопки, но это, вероятно, не самый лучший вариант, учитывая, что это элемент с нефиксированной шириной. Не могли бы вы, случайно, предложить какие-либо другие идеи по этому поводу?
Лучше использовать оба решения, так как кнопка будет бесконечно «прыгать», если курсор останется в конце элемента без фиксированной ширины при изменении текста.
Привет, @tynaut, спасибо за помощь и вклад.
Есть ли способ изменить свойство <use href>, чтобы менять иконку для различных состояний (выбранный ответ, наведение курсора и т.д.)?
