You are here: Home / Freebies For Websites / Demos & Snippets

iOS 'Sticky Hover' Fix - Demos for iPad/ iPhone

One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

Notable uses

• To reset activated button styles (demo 1).
• To re-hide hover-activated menus that have overlapped content (demo 2).

Demo 1

iOS 'Sticky Hover' Fix is OFF Apply Fix TAP ME

When the fix is off/disabled, tap the box, then tap elsewhere. The box stays gold.

When the fix is on/applied, tap the box, then tap elsewhere. The box returns to teal.

Demo 2

iOS 'Sticky Hover' Fix is OFF Apply Fix

When the fix is off/disabled, tap Link 1, then tap surrounding area. The menu stays open.

When the fix is off/disabled, tap Link 1, then tap Link 2 or Link 3. The menu hides.

When the fix is on/applied, tap Link 1, then tap surrounding area. The menu hides.

JavaScript fix

Pop this into your .js file or into your web page in <script> tags;

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.