ボタン上にマウスが置かれていると、オンマウスが起動されるのはなぜですか？

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です。 「開始」という名前の変数にボタンを設定した後、私はそれはホバー上の背景を変更するために、次のJSを使用します。

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

私は、ボタンの外にあることでホバーをトリガすることができています。何故ですか？ Hereは問題が発生したゲームです。ボタンが最初に表示されます。これは他のボタンでも発生します。私はcssのホバーを使うことができると知っていますが、これに間違っていることを知りたいのは興味深いです。

Answer 1

それがこのように動作している理由は、#newのためにあなたのCSSで見つけることができる理由：

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

あなたはこの子コンポーネントは、あなたが幅を持つように設定し、親のdivの幅を継承していることに注意すべきです320ピクセルのあなたは、親と子を検査し、計算されたスタイルを見て、これを確認することができます

親：

お子様：

が続い#newのためのあなたのCSSには、あなたがの位置を動かし48px右に要素：

left: 48px;

この要素STILクロム現像ツールに示すように、幅は320ピクセルです。私がオーバーフローした小さな青いビット）=正確に48px、あなたはその不要な行動を経験していることを賭けだから、私はあなたが今、あなたのCSSで何が起こっているか理解してほしい！

は

あなたもあることを、子供の幅を設定することにより、これを確認することができます

width: calc(100% - 48px);

あなたは何よりオーバーフローが存在しないことを今見つける必要があり

：FYI

Answer 2

ブラウザは実際にここでこの領域からホバー検出を受けています。

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

あなたは、おそらくそれはホバーエリアのスタートとしてテキストを使用し、詰め物の多くは、要素の右側にありますということがわかります。 CSSを使用してこのパディングを削除する必要があります。