onmouseover event misbehaving

Question

私はカーテンタイプのエフェクトを幾らか作りようとしていて、onmouseoverを親のdiv idに適用しました。子供の上にマウスを置いたときに、なぜdivの親以外div以外の効果が起こっているのか理解できません。

var left = document.getElementById("left"); 
var right = document.getElementById("right"); 

function curtain() { 
    left.style.transform = "rotate(30deg)"; 
    right.style.transform = "rotate(-30deg)"; 
} 

function back() { 
    left.style.transform = "rotate(0deg)"; 
    right.style.transform = "rotate(0deg)"; 
} 

CSS：

#animate { 
    width: 400px; 
    margin: auto; 
    position: relative; 
} 
img { 
    width: 100%; 
} 
#left { 
    position: absolute; 
    top: 0; 
    right: 50%; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    transform-origin: 0 0; 
} 
#right { 
    position: absolute; 
    top: 0; 
    right: 0%; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    transform-origin: 100% 0; 
} 

HTML：

<div id="animate" onmouseover="curtain()" onmouseout="back()"> 
    <div id="left"> 
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg"> 
    </div> 
    <div id="right"> 
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg"> 
    </div> 
</div> 

Answer 1

私は答えはあなたが絶対チャイルズの位置をしたということだと思います。これで、親ディビジョンの「一部」ではなくなりました。あなたのケースでは、子供たちは絶対にページに置かれるので、外側のdivは高さがありません。

mouseoverプロパティが委任します。親は聞き取り、それはすべて子供です。イベントリスナーの仕組みの詳細については、こちらを参照してください。https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

これは、画像のサイズに比べて外側のdivの高さが小さいためです。だからあなたが外側divの外にマウスを動かすと、バックイベントが呼び出されます。外側のdivに最小の高さを与えます。ここでのコードに私の理解あたりとして

var left = document.getElementById("left"); 
 
var right = document.getElementById("right"); 
 

 
function curtain() { 
 
    left.style.transform = "rotate(30deg)"; 
 
    right.style.transform = "rotate(-30deg)"; 
 
} 
 

 
function back() { 
 
    left.style.transform = "rotate(0deg)"; 
 
    right.style.transform = "rotate(0deg)"; 
 
}

#animate { 
 
    width: 250px; 
 
    margin: auto; 
 
    position: relative; 
 
    height: 225px; 
 
    border: 1px solid; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
#left { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 50%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transform-origin: 0 0; 
 
} 
 
#right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0%; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 50%; 
 
    transform-origin: 100% 0; 
 
}

<div id="animate" onmouseover="curtain()" onmouseout="back()"> 
 
    <div id="left"> 
 
    <img src="http://www.uwphotographyguide.com/images/Articles/image-overlay-3107.jpg"> 
 
    </div> 
 
    <div id="right"> 
 
    <img src="http://s3.freefoto.com/images/15/78/15_78_19_web.jpg"> 
 
    </div> 
 
</div>

Answer 3

を働いている、私はあなたが子供のdiv効果なしで、あなたのマウスオーバー子div要素になる場合、それが必要時にのみオーバー、マウス起こることをしたいと思います親部門の

これは、子divが親divのスコープの内側にあるために起こります。

これらのdivを管理する必要があります。親divの高さを調整しても問題ありません。