Piccolo problema: l'area di uscita del mouse da un pulsante è più piccola dell'area di entrata del mouse

UX
1

Passaggi:

  • Sposta il cursore su un pulsante.
  • Sposta leggermente il cursore fuori dal pulsante, ma non oltre l’intero pulsante.
  • Lo stato hover del pulsante scompare. Se riposizioni il cursore all’interno del pulsante, lo stato hover non verrà visualizzato.

chrome_DC8p8WGM55

Nota: il pulsante funziona ancora, nonostante lo stato hover non sia attivo. È solo una cosa visiva che mi infastidisce un po’.

2 Mi Piace
2

Non sembra essere un problema… Penso che sia solo l’effetto hover in CSS che scompare dopo pochi secondi, è un’animazione. È sufficiente modificare il CSS.

3

L’effetto non scompare se tengo il cursore del mouse sul pulsante.

image

Se il cursore entra nell’area verde, il pulsante ottiene la classe d-hover che evidenzia l’intero pulsante, come previsto.

Ma non appena il cursore esce dall’area rossa (prova a posizionare il cursore del mouse tra “Rispondi” e la freccia accanto ad esso a sinistra :smile:), l’intero pulsante perde la sua classe d-hover. Non dovrebbe. La classe d-hover dovrebbe scomparire solo quando il cursore esce dall’area verde (o se il pulsante non è più attivo).

4 Mi Piace
4

Domanda veloce: se volessi provare a fare il debug di questo, dovrei guardare

o pensi che il problema provenga da un altro script?

5

Ciao,

Penso che sia qualcosa che puoi cambiare con il CSS. Dal JS sembra che stia prendendo di mira il button.widget-button e aggiungendo la classe .d-hover al mouseenter. Ma quando sposti il cursore sull’icona e poi indietro, esce dalla classe di destinazione e rimuove la classe .d-hover. O qualcosa del genere :slightly_smiling_face:

Prova qualcosa del genere su Desktop / CSS

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

Sep-02-2022 09-07-02

1 Mi Piace
6

Questo è sia un hack che intelligente :smile:
Spero che non interferisca con l’interfaccia di Discourse più del previsto.

Vorrei capire il motivo sottostante di questo comportamento, che si verifica su qualsiasi pulsante, non solo sui controlli di post.

1 Mi Piace
7

Sostituzione di "mouseenter" con "mouseover" qui:\n\ndiscourse/app/assets/javascripts/discourse/app/components/scrolling-post-stream.js at c94a011d9fe334f82e41900b871ca13dff38897d · discourse/discourse · GitHub il problema, ma non sono sicuro se abbia conseguenze indesiderate o meno.\nNon ho riscontrato alcun problema a prima vista.\n\nSuppongo che lascerò che siano gli sviluppatori a vedere se si tratta di una correzione appropriata o meno.