将鼠标悬停事件传递给下层，同时覆盖具有菜单的 div 元素保持可点击状态答案

【问题标题】：pass mouse hover event to lower layer while overlay div elements which has a menu remains clickable将鼠标悬停事件传递给下层，同时覆盖具有菜单的 div 元素保持可点击状态
【发布时间】：2019-07-08 11:59:32
【问题描述】：

所以我有一个带有鼠标悬停动画的画布，上面有一个包含菜单的叠加层。我想要实现的是将鼠标悬停事件传递给画布，即使我悬停在菜单上也是如此。现在我已经部分工作了，

我目前已经部分解决了这个问题，方法是在包含菜单的 div 中使用 CSS 属性 pointer-events: none 并在可点击列表菜单元素中使用 auto，但是当悬停在菜单上时，下部画布没有检测到鼠标，因为它有它专注于在鼠标指针事件中设置为自动的菜单列表子项。

如何在将悬停事件传递到下部画布时让上述菜单保持可点击状态？

【问题讨论】：

将带有“背景颜色：透明”的画布放在菜单顶部会起作用还是会干扰菜单点击？
它会干扰菜单点击。菜单必须在顶层才能监听指针事件。
您当前是否通过 javascript 或 css :hover 检测到鼠标悬停？
我在画布渲染脚本中使用 js 处理鼠标事件
这个问题对我来说似乎很简单，但不知道如何解决。我只需要将悬停传递给画布层，同时保持菜单可点击。现在在菜单部分画布没有检测到鼠标事件。休息它与指针事件一起使用：无；解决方案

标签： javascript html css

【解决方案1】：

使用 JQuery，您可以说，如果您将鼠标悬停在任一元素上，则执行“某事”：

$('.canvasClassName, .menuClassName').mouseover(function () { /*Canvas Action*/ });

canvas/menu ClassName 是对象的一个类。（使用 id 等其他属性也可以使用 # 而不是句点）

如果您将鼠标悬停在画布或菜单上，同时保持菜单的可用性，悬停效果将起作用。

【讨论】：