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.
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
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
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
mouseleave for that div.