当元素被覆盖时取消 mouseout 事件

Posted 2023-05-08

【中文标题】当元素被覆盖时取消 mouseout 事件

【英文标题】：cancelling mouseout event when element is overlaid

【发布时间】：2011-09-14 03:32:23

【问题描述】：

希望这个 JSFiddle 比我的话更能说明问题：

http://jsfiddle.net/pmwRc/6/

当地图悬停时，我在图像地图上显示绝对定位的 H4 作为标签。但是，当鼠标指针移到 H4 上时，图像映射会触发 mouseout，这会导致 H4 再次隐藏。

如何防止这种情况发生？我希望当鼠标在图像地图上时标签可见，无论它是否也在标签上。

【参考方案1】：

您可以使用放置在图像顶部的透明图像/图层（使用您的地图）“作弊”。

http://jsfiddle.net/GRPQa/7/

它使用图像地图坐标工作。

【讨论】：

这似乎是最合适的解决方案。谢谢:)

【参考方案2】：

我知道这不完全一样，但我已经修改了你的小提琴并得到了一个可行的替代方案，只是没有图像映射；）（悬停在“G”和第一个“o”中间）

http://jsfiddle.net/pmwRc/31/

如果需要，您可以使用 style 属性在纯标记中定义坐标：

http://jsfiddle.net/pmwRc/33/

【讨论】：

这是一种更好的方法，干杯。麻烦的是，它依赖于标签 h4 在目标悬停区域上；我应该提到的事情并非总是如此。有时标签在悬停区域旁边，有时几个悬停区域被“分组” - 悬停一个应该在该组中的所有区域上显示标签。但是感谢您的帮助:)

【参考方案3】：

function doSomething(e) 
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event

见http://www.quirksmode.org/js/events_mouse.html