Jacob Windsor Jacob Windsor - 1 year ago 49
CSS Question

Detect hover in overlaying element while allowing all pointer actions

I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.

enter image description here

Excuse my shoddy drawing

I should add that the controls are positioned fixed to the bottom of the screen.

Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried

pointer-events: none
on the element but then no hover event is registered.

I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).

My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a
event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.

I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!

BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.

Update 1

Here's a jsFiddle showing the first two attempts. Change the z-index of
to see the effect of it being on top of the play button or below.

Answer Source

I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.

But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.

Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.