# 小问题：按钮的鼠标移出区域比鼠标移入区域小
**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年一月27日 18: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:** 7
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年一月27日 18:04 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/1 "2022-01-27T18:04:04Z")
步骤：
- 将光标移到按钮上。
- 将光标稍微移出按钮，但不要移出整个按钮。
- 按钮的悬停状态会消失。如果再次将光标移入按钮，则不会显示悬停状态。
_注意：尽管悬停状态未激活，按钮仍然可以正常工作。这只是一个让我有点烦恼的视觉问题。_
---
### Author:  [@yhh9xdq7d](https://meta.discourse.org/u/yhh9xdq7d)
#### Post date: [2022年一月27日 18:24 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/2 "2022-01-27T18:24:41Z")
这似乎不是一个问题。我认为这只是 CSS 中的悬停效果，会在几秒钟后消失，这是一个动画。只需要更改 CSS。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年一月27日 20:20 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/3 "2022-01-27T20:20:51Z")
> [@yhh9xdq7d](#):
>
> 我认为这只是 CSS 中的悬停效果，几秒钟后就会消失
如果我将鼠标光标保持在按钮上，该效果不会消失。
* * *
如果光标移入 **绿色** 区域，按钮将获得 `d-hover` 类，从而突出显示整个按钮，正如预期的那样。
但是，一旦光标离开 **红色** 区域（尝试将鼠标光标放在“Reply”和它左侧的箭头之间：微笑），整个按钮就会失去其 `d-hover` 类。它不应该这样。 `d-hover` 类应该只在光标离开绿色区域时（或者如果按钮不再获得焦点）消失。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年九月1日 22:55 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/4 "2022-09-01T22:55:34Z")
快速提问：如果我想尝试调试这个问题，我应该查看
>
还是你认为问题来自另一个脚本？
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2022年九月2日 07: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")
您好：
我认为您可以使用 CSS 来更改此设置。从 JS 来看，它似乎针对的是 `button.widget-button`，并在 `mouseenter` 时添加 `.d-hover` 类。但是，当您将光标移到图标上然后移开时，它会从目标类中移除并删除 `.d-hover` 类。或者类似这样的东西 🙂
尝试在桌面/CSS 上执行类似操作：
```scss
nav.post-controls {
.actions button {
.d-icon,
.d-button-label {
pointer-events: none;
}
}
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年九月2日 10:14 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/6 "2022-09-02T10:14:20Z")
这既有技巧性又很聪明 😄
我希望它不会比预期对 Discourse 的界面造成更多干扰。
我想了解这种行为的根本原因，它发生在任何按钮上，而不仅仅是帖子控件。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年九月7日 12:03 UTC](https://meta.discourse.org/t/small-issue-the-mouse-out-area-from-a-button-is-smaller-than-the-mouse-in-area/216233/7 "2022-09-07T12:03:42Z")
将“mouseenter”替换为“mouseover”在此处：
>
可以解决此问题，但我不知道这是否会带来任何不希望的后果。
乍一看我没有遇到任何问题。
我猜我会让开发人员看看这是否是一个合适的修复程序。