为什么当鼠标不在按钮中时，鼠标会被触发？

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。将按钮设置为名为＆＃34; start＆＃34;的变量后，我使用以下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

可以在#new

的css中找到以这种方式行事的原因

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

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

父：

儿童：

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

left: 48px;

此元素的宽度仍为320像素，如chrome developer tools所示。

我敢打赌那个溢出的蓝色位正好是48px而且你遇到了不想要的行为=）所以，我希望你现在能理解你的css发生了什么！

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

来验证这一点

width: calc(100% - 48px);

现在你应该发现没有更多的溢出：