我正在 SPA 中构建一个音频播放器，并有一个主播放器小部件，用于显示当前播放的轨道以及页面底部的控件。所需的 UI 是隐藏除播放/暂停按钮之外的所有控件，直到用户将鼠标悬停在播放/暂停按钮附近。此时，额外信息、搜索栏、音量控件等将以动画形式显示在屏幕上。
请原谅我的粗制滥造
我应该补充一点，控件固定在屏幕底部。
最初，我尝试在所有内容(高 z-index)之上添加一个额外的固定位置 div，并使用它来触发悬停事件。显然，这不允许单击其下面的按钮，因此我在元素上尝试了 pointer-events: none 但没有注册悬停事件。
然后，我尝试将悬停区域放置在控制元素下方，并将悬停触发器添加到悬停区域和控件。当在悬停区域和任何控件之间移动光标时(即单击暂停/播放)，这会导致奇怪的行为。
我的下一个想法是废弃悬停区域 HTML 元素并使用纯 JS 解决方案。我可以向文档正文注册一个 mousemove 事件，并检测光标何时位于悬停区域内，从而触发控制动画。但是，我担心这可能会导致性能问题，因为看起来有点重。
我希望有人对我尝试过的事情提出一些意见/改进，或者提出一些我没有想到的东西!
顺便说一句:如果这能激发一些使用它的好主意，我正在使用 angular2 来做动画。
更新 1
这是一个jsFiddle显示前两次尝试。更改 hover-region 的 z-index 以查看其位于播放按钮顶部或下方的效果。
最佳答案
我已经为您创建了一个工作版本:http://jsfiddle.net/6wk69fvo/1/ 。您已经按照我的建议进行了操作，即使用 onmouseenter 和 onmouseleave。
但是，您不仅需要检查悬停区域，还需要检查工具栏区域，然后将两个值OR在一起。
另请注意，我将播放/暂停按钮作为悬停区域的子按钮。如果您不想这样做，则需要为该 div 创建第三次检查 mouseenter 或 mouseleave。
关于javascript - 检测重叠元素中的悬停，同时允许所有指针操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40333468/