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

**URL:** <https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233>\
**Category:** UX\
**Created:** [2022 年 1 月 27 日午後 6:04 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233 "2022-01-27T18:04:04Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2022 年 9 月 2 日午前 7:08 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/5 "2022-09-02T07:08:39Z")

</div>

こんにちは。

これはCSSで変更できるものだと思います。JSからは、`button.widget-button`をターゲットにして、`mouseenter`時に`.d-hover`クラスを追加しているようです。しかし、カーソルをアイコンに移動させて戻すと、ターゲットクラスから外れて`.d-hover`クラスが削除されます。あるいは、そのような感じです:slightly\_smiling\_face:

デスクトップ/CSSで次のようなものを試してみてください。

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

```

![Sep-02-2022 09-07-02](https://global.discourse-cdn.com/meta/original/4X/0/8/e/08efbb8afefb0d781042ce0c05b4e1a6402cd0ea.gif)

---

_[View the full topic](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233)._