子要素のJavaScript mouseover/mouseout問題

Question

私はこの小さな問題があり、私はあなたの助けを求めています。 は、私はあなたが、見ての通り、この

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()"> 
    <img id="child" src="button.png" style="visibility: hidden" /> 
</div> 

<script type="text/javascript"> 
    function MyFuncHover() { 
     // Here I have some code that makes the "child" visible 
    } 

    function MyFuncOut() { 
     // Here I have some code that makes the "child" invisible again 
    } 
</script> 

のように、私はIMG要素を持っている内DIV要素を持っている、画像はDIVの子です。私はそれが欲しいときに私はdiv、子供が消えることを残す。それでも、画像の上にマウスを移動すると、MyFuncOut（）関数が呼び出されたように見えます（画像をホバリングすることでdivを残していると思います）。私はそれが起こることを望んでいません。 MyFuncOut（）関数は、div領域から離れるときにのみ呼び出されます。

子コントロールの上にマウスを移動すると、その親がmouseoutイベントを呼び出すことがわかりませんでした（私が子供の上にいても、私はまだ親の上です）。私はこれに閉じ込められ、あなたの良いアドバイスが少し必要です。ありがとう！

は

O.K.を変更しますイベントのバブリングは、子を「マウスアウト」したときに親に「mouseout」イベントを送信しません。また、子を「マウスオーバー」すると、親に「mouseover」イベントを送信しません。それは私が必要とするものではありません。私は子供を "マウスオーバー"するとき、親の "mouseout"イベントが送られないようにする必要があります。それを得る？イベントのバブリングは、たとえば、子イベントのクリックイベントを親イベントに伝播させたくない場合に便利ですが、これは私のケースではありません。変わったのは、親の「マウスオーバー」イベントを発生させない、同じ親の中に他の要素があることです。

Answer 1

ない場合は、ここでは以下のコードは追加し、

上記

$(document).ready(function() { 
     $("#parent").mouseenter(function() { 
      $("#child").show(); 
     }); 
     $("#parent").mouseleave(function() { 
      $("#child").hide(); 
     }); 
    }); 

、イベントを添付する

<div id="parent"> 
    <img id="child" src="button.png" style="display:none;" /> 
</div> 

Answer 2

私もこれに問題があり、私はそれを動作させることができませんでした。これは私が代わりにやったことではなく、はるかに簡単でjavascriptではないので、より速く、オフにすることはできません。

div.container 
{ 
opacity:0.0; 
filter:alpha(opacity="00"); 
} 

div.container:hover 
{ 
opacity:1.0; 
filter:alpha(opacity="100"); 
} 

不透明度を向上させるためにcss3トランジションを追加することもできます。

Answer 3

ただ、ターゲットをチェックし、あなたのMyFuncOut機能へのステートメントは、あなたが「MouseEnterイベント」とjQueryで利用できる「mouseleave」イベントを使用することができ、画像

if (event.target !== imageNode) { 
    imageNode.style.display = 'none' 
} 

Answer 4

あなたは以下のソリューションを使用することができ、これはそれは純粋なjavascriptだと私は成功に使用されます。

var container = document.getElementById("container"); 
var mouse = {x: 0, y: 0}; 

function mouseTracking(e) { 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY; 
    var containerRectangle = container.getBoundingClientRect(); 

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right && 
      mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) { 
     // Mouse is inside container. 
    } else { 
     // Mouse is outside container. 
    } 
} 
document.onmousemove = function() { 
    if (document.addEventListener) { 
     document.addEventListener('mousemove', function (e) { 
      mouseTracking(e); 
     }, false); 
    } else if (document.attachEvent) { 
     // For IE8 and earlier versions. 
     mouseTracking(window.event); 
    } 
} 

私はそれが役に立ちそうです。