Pequeño problema: el área de salida del ratón de un botón es más pequeña que el área de entrada del ratón

UX
1

Pasos:

  • Mueve el cursor sobre un botón.
  • Mueve el cursor un poco fuera del botón, pero no más allá del botón completo.
  • El estado de desplazamiento del botón desaparece. Si vuelves a mover el cursor dentro del botón, el estado de desplazamiento no se mostrará.

chrome_DC8p8WGM55

Nota: el botón sigue funcionando, a pesar de que el estado de desplazamiento no está activo. Es solo algo visual que me molesta un poco.

2 Me gusta
2

Esto no parece ser un problema… Creo que es solo el efecto de desplazamiento en CSS que desaparece después de unos segundos, es una animación. Solo necesito cambiar el CSS.

3

El efecto no desaparece si mantengo el cursor del ratón sobre el botón.

image

Si el cursor entra en el área verde, el botón obtiene la clase d-hover que resalta todo el botón, como se esperaba.

Pero tan pronto como el cursor sale del área roja (intenta poner el cursor del ratón entre “Responder” y la flecha a su izquierda :smile:), todo el botón pierde su clase d-hover. No debería ser así. La clase d-hover solo debería desaparecer cuando el cursor sale del área verde (o si el botón ya no está enfocado).

4 Me gusta
4

Pregunta rápida: si quisiera intentar depurar esto, ¿debería mirar en

o crees que el problema proviene de otro script?

5

Hola,

Creo que esto es algo que puedes cambiar con CSS. Desde el JS, parece que se dirige al button.widget-button y añade la clase .d-hover al mouseenter. Pero cuando mueves el cursor hacia el icono y de vuelta, sale de la clase objetivo y se elimina la clase .d-hover. O algo así :slightly_smiling_face:

Intenta algo como esto en Escritorio / CSS

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

Sep-02-2022 09-07-02

1 me gusta
6

Esto es a la vez improvisado e inteligente :smile:
Espero que no interfiera con la interfaz de Discourse más de lo esperado.

Me gustaría entender la razón subyacente de este comportamiento, que ocurre en cualquier botón, no solo en los controles de publicación.

1 me gusta
7

Reemplazando “mouseenter” por “mouseover” aquí:

Resuelve el problema, pero no estoy seguro de si tiene consecuencias no deseadas o no.
No encontré ningún problema a primera vista.

Supongo que dejaré que los desarrolladores vean si es una solución adecuada o no.