检测悬停在覆盖元素中，同时允许所有指针操作

Question

我正在SPA中构建一个音频播放器，并有一个主播放器小部件，显示当前正在播放的音轨以及页面底部的控件。所需的UI是隐藏所有控件，但是播放/暂停按钮，直到用户将靠近播放/暂停按钮。此时，额外信息，搜索栏，音量控制等将在屏幕上显示动画。

请原谅我的伪劣绘图

我应该补充一点，控件的位置固定在屏幕的底部。

最初，我尝试在所有内容（高z-index）之上添加额外的固定定位div并使用它来触发悬停事件。显然，这不允许单击它下面的按钮，所以我在元素上尝试pointer-events: none但是没有注册悬停事件。

然后我尝试将悬停区域放在控制元素下面，并将悬停触发器添加到悬停区域和控件。当在悬停区域和任何控件之间移动光标时（即单击暂停/播放），这会导致奇怪的行为。

我的下一个想法是废弃悬停区域HTML元素并使用纯JS解决方案。我可以向文档正文注册mousemove事件，并检测光标何时在悬停区域内，触发控制动画。但是，我担心这可能会导致性能问题，因为看起来有点沉重。

我希望有人对我尝试过的事情有一些投入/改进或提出我没想过的事情！

BTW：我正在使用angular2作为动画，如果它激发了一些明智的想法来使用它。

更新1

这是显示前两次尝试的jsFiddle。更改hover-region的z-index，以查看它在播放按钮顶部或下方的效果。

Answer 1

您可以更改控件的不透明度，使其可见/不可见。这是在纯html / js中完成的simple example，以避免设置ng2应用程序的开销，但是，我确信您可以快速将其调整为您的代码。

Answer 2

我已在http://jsfiddle.net/6wk69fvo/1/为您创建了一个可用的版本。您已经完成了我要建议的内容，即使用onmouseenter和onmouseleave。

但是，您不仅要检查悬停区域，还需要检查工具栏区域，然后只需OR这两个值。

另请注意，我将播放/暂停按钮作为悬停区域的子项。如果您不想这样做，则需要针对该div为mouseenter或mouseleave创建第三张支票。