Маленькая проблема: область выхода мыши из кнопки меньше области входа

Внести вклад UX
1

Шаги:

  • Наведите курсор на кнопку.
  • Слегка отведите курсор от кнопки, но не дальше, чем по всей площади кнопки.
  • Состояние наведения кнопки исчезает. Если вы снова переместите курсор внутрь кнопки, состояние наведения не отобразится.

chrome_DC8p8WGM55

Примечание: кнопка всё ещё работает, несмотря на то, что состояние наведения не активно. Это просто визуальная проблема, которая меня немного беспокоит.

2 лайка
2

Похоже, это не проблема… Думаю, это просто эффект наведения в CSS, который исчезает через несколько секунд — это анимация. Нужно просто изменить CSS.

3

Эффект не пропадает, если держать курсор мыши на кнопке.

image

Если курсор попадает внутрь зелёной области, кнопка получает класс d-hover, который подсвечивает всю кнопку, как и ожидалось.

Но как только курсор выходит за пределы красной области (попробуйте поместить курсор мыши между «Ответить» и стрелкой слева от неё :smile:), кнопка полностью теряет класс d-hover. Этого не должно происходить. Класс d-hover должен исчезать только тогда, когда курсор покидает зелёную область (или если кнопка больше не находится в фокусе).

4 лайка
4

Вопрос на скорую руку: если я захочу попытаться отладить это, мне стоит посмотреть на

или вы думаете, что проблема исходит из другого скрипта?

5

Здравствуйте,

Думаю, это можно исправить с помощью CSS. Судя по JS, скрипт нацеливается на button.widget-button и добавляет класс .d-hover при событии mouseenter. Однако, когда вы перемещаете курсор на иконку и обратно, целевой класс теряется, и класс .d-hover удаляется. Или что-то в этом роде :slightly_smiling_face:

Попробуйте добавить что-то подобное в раздел Desktop / CSS:

nav.post-controls {
  .actions button {
    .d-icon,
    .d-button-label {
      pointer-events: none;
    }
  }
}

Sep-02-2022 09-07-02

1 лайк
6

Это одновременно и хакерское, и умное решение :smile:
Надеюсь, это не будет мешать интерфейсу Discourse больше, чем ожидалось.

Мне бы хотелось понять коренную причину такого поведения, которое проявляется на любой кнопке, а не только на элементах управления постом.

1 лайк
7

Замена «mouseenter» на «mouseover» здесь:

Решает проблему, но я не уверен, не повлечёт ли это нежелательных последствий.
На первый взгляд, никаких проблем не обнаружено.

Полагаю, я оставлю решение за разработчиками, чтобы они проверили, является ли это корректным исправлением.