为什么当鼠标不在按钮中时 on mouse in 甚至会被触发？

Question

我的 js 游戏中有一个开始按钮。我只是注意到我可以稍微偏右一点，光标是一个指针。我的css：

#start{
position: absolute;

top: 130px;
left: 195px;
height: 80px;
width:320px;

background-color: red;

cursor: pointer;

border: 2px solid yellow;
border-radius: 20px;
}

按钮只是一个div。将按钮设置为名为 "start" 的变量后，我使用以下 js 使其在悬停时更改背景：

start.onmouseover=function(){
    this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
    this.style.backgroundColor="red";
}

我可以通过在按钮之外触发悬停。这是为什么？ Here 是出现问题的游戏。按钮是您首先看到的东西。其他一些按钮也会出现这种情况。我知道我可以使用 css 悬停，但很想知道这有什么问题。

Answer 1

浏览器实际上是从这里的这个区域进行悬停检测。

http://i.imgur.com/WPYi7gj.png

您可能会看到它使用文本作为悬停区域的开始，并且元素右侧有很多填充。您需要使用 CSS.

删除此填充

Answer 2

可以在您的 css for #new:

中找到它这样做的原因

#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;

您应该注意，此 child 组件继承了 parent div 的宽度，您将其设置为 320px 的宽度。您可以通过检查 parent 和 child 并查看计算样式来验证这一点：

Parent:

Child:

然后在 #new 的 css 中，您将元素的位置向右移动了 48 像素：

left: 48px;

此元素的宽度仍为 320px，如 chrome 开发人员工具中所示。

我敢打赌溢出的蓝色小点正好是 48px 并且您遇到了不希望的行为 =) 所以，我希望您现在明白您的 css 是怎么回事了！

您甚至可以通过将 child 的宽度设置为：

来验证这一点

width: calc(100% - 48px);

你现在应该发现没有溢出了：

为什么当鼠标不在按钮中时 on mouse in 甚至会被触发？

Why does the on mouse in even gets triggered when the mouse is not in the button?

html

javascript

css

hover

mouseevent