Problème JavaScript mouseover / mouseout avec élément enfant

J'ai ce petit problème et je demande votre aide.
J'ai un div élément, à l'intérieur de laquelle j'ai une img élément, comme ce

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

Comme vous le voyez, l'image est un enfant de la div. Je veux que c'est seulement quand j'ai quitter le divl'enfant à disparaître. Pourtant, ça ressemble quand je bouge la souris sur l'image, l' MyFuncOut() fonction est appelée (parce que, je suppose, je laisse la div en survolant l'image). Je ne veux pas que cela se produise. Je veux le MyFuncOut() fonction qui doit être appelée que lorsque je quitte le div zone.

Je ne savais pas que lorsque vous déplacez votre souris sur un contrôle enfant, parent appelle l'événement mouseout (même si je suis au-dessus de l'enfant, je suis toujours au-dessus de la mère, trop). Je suis pris au piège dans ce et j'ai besoin d'un peu de vos bons conseils. Merci!

CHANGEMENTS

O. K. remontée d'Événements n'envoie pas le "mouseout" événement à la mère quand je "mouseout" l'enfant. Elle aussi ne pas envoyer le "survol" de l'événement à la mère quand je "survol" de l'enfant. Ce n'est pas ce dont j'ai besoin. J'ai besoin de la "mouseout" l'événement de la mère pour ne pas être envoyé quand je "survol" de l'enfant. Pour l'obtenir? Remontée d'événements est utile quand je ne veux pas, par exemple, un événement de clic sur l'enfant d'être propagées à la société mère, mais ce n'est pas mon cas. Ce qui est bizarre, c'est que j'ai d'autres éléments à l'intérieur du même parent qui ne mettent pas le feu à la "mouseout" l'événement de la mère quand je "mouseover".

source d'informationauteur ali

  1. 22

    vous pouvez utiliser "mouseenter" et "mouseleave" événements disponibles dans jquery, voici le code ci-dessous,

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

    ci-dessus est d'attacher un événement,

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

    Vous pouvez utiliser la solution ci-dessous, c'est du pur javascript et j'ai utilisé avec succès.

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

    J'espère que cela aide.

  3. 3

    Juste ajouter une instruction if pour votre MyFuncOut fonction qui vérifie la cible n'est pas l'image

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

    J'ai eu des problèmes avec ce trop et je n'ai pas été en mesure de l'obtenir pour fonctionner. C'est ce que j'ai fait à la place, et beaucoup plus facile et n'est pas du javascript donc c'est plus rapide et ne peut pas être éteint.

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

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

    Vous pouvez même ajouter le css3 transition pour l'opacité de lui donner un plus à l'ambiance.