javascript - 为什么当鼠标不在按钮中时 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 hover，但我很想知道这有什么问题。

Answer 1

可以在您的 #new 的 css 中找到它以这种方式运行的原因:

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

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

家长:

child :

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

左:48px;

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

我敢打赌溢出的蓝色小块恰好是 48px 并且您遇到了不想要的行为 =) 所以，我希望您现在了解您的 css 发生了什么!

您甚至可以通过将 child 的宽度设置为来验证这一点:

宽度:计算(100% - 48px);

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