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

我正在SPA中构建一个音频播放器，在页面底部有一个主播放器小部件，显示当前播放的曲目和控件。所需的UI是隐藏除播放/暂停按钮之外的所有控件，直到用户将鼠标悬停在播放/暂停按钮附近。此时，额外信息、搜索栏、音量控制等将显示在屏幕上

请原谅我的拙劣画作

我要补充的是，这些控件固定在屏幕底部

最初，我尝试在所有内容的顶部添加一个额外的固定位置div（高z索引），并使用它触发悬停事件。显然，这不允许单击它下面的按钮，因此我尝试了元素上的

指针事件：none

，但是没有注册悬停事件

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

我的下一个想法是放弃悬停区域HTML元素，使用纯JS解决方案。我可以向文档主体注册

mousemove

事件，并检测光标何时位于悬停区域内，从而触发控件动画。但是，我担心这可能会导致性能问题，因为这似乎有点严重

我希望有人对我尝试过的东西有一些意见/改进，或者提出了一些我没有想到的东西

顺便说一句：我正在使用angular2制作动画，如果这能激发一些聪明的想法来使用它的话

更新1

---

下面是前两次尝试的演示。更改悬停区域的z索引，以查看其位于播放按钮上方或下方的效果。

您可以更改控件的不透明度，使其可见/不可见。这是一个纯html/js版本，可以避免设置ng2应用程序的开销，但我相信您可以快速调整它以适应您的代码。

您可以更改控件的不透明度，使其可见/不可见。下面是一个纯html/js版本，以避免设置ng2应用程序的开销，但我相信您可以快速调整它以适应您的代码。

我已经在为您创建了一个工作版本。你已经按照我的建议做了，那就是使用

onmouseenter

和

onmouseeve

但是，除了检查悬停区域，还需要检查工具栏区域，然后将这两个值一起检查

---

还请注意，我将“播放/暂停”按钮作为悬停区域的子按钮。如果您不想这样做，您需要为该分区的

mouseenter

或

mouseleave

创建第三个检查。

我已经在为您创建了一个工作版本。你已经按照我的建议做了，那就是使用

onmouseenter

和

onmouseeve

但是，除了检查悬停区域，还需要检查工具栏区域，然后将这两个值一起检查

---

还请注意，我将“播放/暂停”按钮作为悬停区域的子按钮。如果您不想这样做，您需要为该div的

mouseenter

或

mouseleave

创建第三个检查。

您能为代码提供一个JSFIDLE吗？只要悬停区域与显示的工具栏一样大，它就应该可以正常工作，不会出现任何奇怪的行为。看看这个@ToddChaffee jsFiddle此处：。工具栏可以比悬停区域大。您可以提供一个JSFIDLE，其中包含不起作用的代码吗？只要悬停区域与显示的工具栏一样大，它就应该可以正常工作，不会出现任何奇怪的行为。看看这个@ToddChaffee jsFiddle此处：。工具栏可以比悬停区域大，但我应该提到的是，额外的控件比悬停区域大，所以作为一个孩子使用它是不起作用的（据我所知）。请看这里的JSFIDLE，这样您就有了一个“热区”来显示控件，如何隐藏它们？触发器是什么？隐藏它们非常简单，只需设置

display:none

或使用您建议的不透明度即可。触发器悬停在播放/暂停按钮附近的“热区”中。我得到了这个按钮，但您想何时隐藏它们？你把它们显示在悬停状态，然后隐藏在？该元素在未悬停在热区域时应隐藏。请看接受的回答谢谢，但我应该提到的是，额外的控制比悬停区域大，所以作为一个孩子没有工作（据我所知）。请看这里的JSFIDLE，这样您就有了一个“热区”来显示控件，如何隐藏它们？触发器是什么？隐藏它们非常简单，只需设置

display:none

或使用您建议的不透明度即可。触发器悬停在播放/暂停按钮附近的“热区”中。我得到了这个按钮，但您想何时隐藏它们？你把它们显示在悬停状态，然后隐藏在？该元素在未悬停在热区域时应隐藏。请查看已接受的答案完美！谢谢你。我会把播放按钮放在over区域之外，但没有指定，因为这不是真的需要。太好了！谢谢你。我将把播放按钮放在over区域之外，但没有指定，因为这不是真的需要。