JavaScript mouseover/mouseout Problem mit Kindelement

Question

Ich habe dieses kleine Problem und ich bitte um Ihre Hilfe. Ich habe ein div Element, innerhalb dessen ich ein img Element haben, wie diese

<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> 

Wie Sie sehen, ist das Bild ein Kind des div. Ich will das nur wenn ich das div verlasse, verschwindet das Kind. Es sieht jedoch so aus, als wenn ich die Maus über das Bild bewege, wird die MyFuncOut() Funktion aufgerufen (weil, ich nehme an, ich lasse das div, indem ich das Bild schwebe). Ich möchte nicht, dass das passiert. Ich möchte die MyFuncOut() Funktion nur aufgerufen werden, wenn ich den div Bereich verlasse.

Ich wusste nicht, dass, wenn Sie Ihre Maus über ein Kind-Steuerelement bewegen, es Eltern ruft das Mouseout-Ereignis (auch wenn ich über das Kind bin, bin ich immer noch über die Eltern, auch). Ich bin darin gefangen und ich brauche ein wenig von deinem guten Rat. Vielen Dank!

ÄNDERUNGEN

O. K. Event bubbling wird das "mouseout" -Ereignis nicht an das Elternobjekt senden, wenn ich das Kind "mouseout". Es wird auch nicht das "Mouseover" -Ereignis an den Eltern senden, wenn ich das Kind "mouseover". Das ist nicht was ich brauche. Ich brauche das "mouseout" Ereignis des Elternteils, um nicht gesendet zu werden, wenn ich das Kind "mouseover". Hole es? Das Bubbling von Ereignissen ist nützlich, wenn ich beispielsweise nicht möchte, dass ein Klickereignis für das untergeordnete Element an das übergeordnete Element weitergegeben wird. Dies ist jedoch nicht der Fall. Was seltsam ist, ist, dass ich andere Elemente innerhalb desselben Elternteils habe, die das "mouseout" -Ereignis des Elternteils nicht auslösen, wenn ich sie "mouseover" übersetze.

Answer 1

Sie „MouseEnter-“ verwenden können, und „mouseleave“ Ereignisse in jquery verfügbar, hier ist der Code unten,

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

oben ist ein Ereignis zu befestigen,

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

Answer 2

Ich hatte auch Probleme damit und ich konnte es nicht zur Arbeit bringen. Dies ist, was ich getan habe, und es ist viel einfacher und ist nicht Javascript, so ist es schneller und kann nicht ausgeschaltet werden.

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

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

Sie können sogar die css3 Übergang hinzufügen, für Opazität es ein glatteres Gefühl zu ihm geben.

Answer 3

Fügen Sie einfach eine if-Anweisung zu Ihrer MyFuncOut Funktion, die das Ziel überprüft, ist nicht das Bild

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

Answer 4

Sie die Lösung unten verwenden können, die es ist reines javascript und ich habe mit erfolg verwendet.

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); 
    } 
} 

Ich hoffe, es hilft.