JavaScript的鼠标悬停/与子元素的mouseout问题(JavaScript mouseov

我有这个小问题，我请求您的帮助。我有一个div元素，这里面我有一个img元素，像这样

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

正如你看到的，图像是div的孩子。我想，只有当我离开的股利，孩子消失。然而，它看起来像当我将鼠标移动到图像时，MyFuncOut（）函数被调用（因为，我想，我将鼠标悬停在图片离开DIV）。我不希望这样的事情发生。我只希望当我离开的DIV区域被称为MyFuncOut（）函数。

我不知道，当你在一个子控件移动鼠标，它的父调用mouseout事件（即使我在小时候，我仍然在父，太）。我陷入这一点，我需要一点点你的好建议。谢谢！

变化

OK事件冒泡将不会在“鼠标移出”事件发送到父，当我“鼠标移出”孩子。它也不会在“鼠标悬停”事件发送到父，当我“鼠标悬停”孩子。这不是我所需要的。我需要家长的“鼠标移出”事件，不是我“鼠标悬停”孩子被发送。得到它？事件冒泡是有用的，当我不想要的，例如，对孩子click事件被传播到父，但这不是我的情况。什么是奇怪的是，我有相同的父内的其他元素不火的父母，当我“鼠标悬停”他们的“鼠标移出”事件。

Answer 1:

您可以使用“的mouseenter”和“鼠标离开”事件提供了jQuery，这里是下面的代码，

$(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和我一起成功使用。

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

我希望它能帮助。

Answer 3:

只需添加一个if语句您MyFuncOut功能将检查该目标不是图像

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

Answer 4:

我有过这个问题，不能得到它的工作。这是我做的，而不是。这是很容易和JavaScript不那么它的速度更快，并且不能被关闭。

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

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

你甚至可以添加CSS3过渡的不透明给它一个平滑的感觉。

Answer 5:

只需设置子元素的指针事件的CSS：无; 见例如：

 #parent { width: 500px; height: 500px; border: 1px solid black; } #child { width: 200px; pointer-events: none; # this does the trick }

 <div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()"> <img id="child" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" /> </div> <script type="text/javascript"> function MyFuncHover() { console.log("mouse over") } function MyFuncOut() { console.log("mouse out") } </script>

文章来源: JavaScript mouseover/mouseout issue with child element