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

【问题标题】：Why does the on mouse in even gets triggered when the mouse is not in the button?为什么当鼠标不在按钮中时甚至会触发on mouse in？
【发布时间】：2016-06-29 02:12:56
【问题描述】：

我的 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，但我很想知道这有什么问题。

【问题讨论】：

仅供参考 - 无需 javascript 更改悬停样式...使用 css :hover 选择器
在我的描述中我写道我知道@charlietfl。我想这将是一个更好的方法，这就是我将要做的。我只是出于好奇才问这个问题，为什么它的行为很奇怪。
如果没有复制它的演示，我们无法知道
您使用的是哪个浏览器？也许在 JSFiddle 中隔离它会有所帮助
我正在使用 chrome。您可以通过链接查看问题。

标签： javascript html css hover mouseevent

【解决方案1】：

可以在 #new 的 css 中找到它这样做的原因：

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

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

家长：

孩子：

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

left: 48px;

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

我敢打赌，溢出的蓝色小点正好是 48 像素，并且您正在经历这种不想要的行为 =) 所以，我希望您现在了解您的 css 发生了什么！

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

width: calc(100% - 48px);

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：