12

我有这个小问题，我请求你的帮助。我有一个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的子级。我希望只有当我离开div时，孩子才会消失。然而，看起来当我将鼠标移到图像上时，调用了MyFuncOut()函数（因为，我想，我通过悬停图像离开了 div）。我不希望这种情况发生。我希望仅在离开div区域时调用MyFuncOut()函数。

我不知道当您将鼠标移到子控件上时，它的父级会调用 mouseout 事件（即使我在子级之上，我仍然在父级之上）。我陷入了困境，我需要你的一些好建议。谢谢！

变化

OK 当我“鼠标移出”孩子时，事件冒泡不会将“鼠标移出”事件发送给父级。当我“鼠标悬停”孩子时，它也不会向父母发送“鼠标悬停”事件。那不是我需要的。当我“鼠标悬停”孩子时，我需要不发送父母的“mouseout”事件。得到它？例如，当我不希望将子项上的单击事件传播给父项时，事件冒泡很有用，但这不是我的情况。奇怪的是，当我“将鼠标悬停”它们时，我在同一个父级中还有其他元素不会触发父级的“mouseout”事件。

4

5 回答 5

24

您可以使用 jquery 中可用的“mouseenter”和“mouseleave”事件，这是下面的代码，

$(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>
于 2012-05-17T05:16:06.780 回答
7

您可以使用下面的解决方案，它是纯 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);
    }
}

我希望它有所帮助。

于 2014-08-21T13:46:34.193 回答
4

只需在您的 MyFuncOut 函数中添加一个 if 语句来检查目标不是图像

if (event.target !== imageNode) {
     imageNode.style.display = 'none'
}
于 2012-05-16T12:17:29.520 回答
1

我也遇到了这个问题，无法让它工作。这就是我所做的。它更容易而且不是 JavaScript，所以它更快并且不能被关闭。

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

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

您甚至可以为不透明度添加 CSS3 过渡，使其具有更平滑的感觉。

于 2012-05-16T12:02:27.380 回答
1

只需设置子元素的css pointer-event:none; 参见示例：

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

于 2018-10-12T20:32:03.820 回答