Pequeno problema: a área de saída do mouse de um botão é menor que a área de entrada do mouse

Experiência do Usuário
1

Passos:

  • Mova o cursor sobre um botão.
  • Afaste um pouco o cursor do botão, mas não mais do que o botão inteiro.
  • O estado de foco do botão desaparece. Se você mover o cursor para dentro do botão novamente, o estado de foco não será exibido.

chrome_DC8p8WGM55

Observação: o botão ainda funciona, apesar do estado de foco não estar ativo. É apenas uma questão visual que me incomoda um pouco.

2 curtidas
2

Isso não parece ser um problema… Acho que é apenas o efeito de hover em CSS que desaparece após alguns segundos, é uma animação. Só preciso mudar o CSS.

3

O efeito não desaparece se eu mantiver o cursor do mouse sobre o botão.

image

Se o cursor entrar na área verde, o botão recebe a classe d-hover que destaca o botão inteiro, como esperado.

Mas assim que o cursor sair da área vermelha (tente colocar o cursor do mouse entre “Responder” e a seta ao lado dela à esquerda :smile:), o botão inteiro perde sua classe d-hover. Não deveria. A classe d-hover só deve desaparecer quando o cursor sair da área verde (ou se o botão não estiver mais focado).

4 curtidas
4

Pergunta rápida: se eu quisesse tentar depurar isso, eu deveria olhar em

ou você acha que o problema vem de outro script?

5

Olá,

Acho que isso é algo que você pode mudar com CSS. Do JS, parece que ele está visando o button.widget-button e adicionando a classe .d-hover ao mouseenter. Mas quando você move o cursor para o ícone e de volta, ele sai da classe alvo e remove a classe .d-hover. Ou algo assim :slightly_smiling_face:

Tente algo assim no Desktop / CSS

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

Sep-02-2022 09-07-02

1 curtida
6

Isso é ao mesmo tempo improvisado e inteligente :smile:
Espero que não interfira na interface do Discourse mais do que o esperado.

Gostaria de entender a razão subjacente para este comportamento, que ocorre em qualquer botão, não apenas nos controles de postagem.

1 curtida
7

Substituindo “mouseenter” por “mouseover” aqui:

Resolve o problema, mas não tenho certeza se isso tem consequências indesejadas ou não.
Não encontrei nenhum problema à primeira vista.

Suponho que deixarei os desenvolvedores verem se é uma correção adequada ou não.