小さな問題：ボタンのマウスアウトエリアがマウスインエリアより小さい

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をターゲットにして、mouseenter時に.d-hoverクラスを追加しているようです。しかし、カーソルをアイコンに移動させて戻すと、ターゲットクラスから外れて.d-hoverクラスが削除されます。あるいは、そのような感じです:slightly_smiling_face:

デスクトップ/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」に置き換えます。

問題は解決しますが、意図しない結果があるかどうかはわかりません。
一見したところ、問題はありませんでした。

これが適切な修正かどうかは、開発者に確認してもらうことにします。