Hover touch support
Internet Explorer 11 on Windows 8.1 has built-in touch support for common UX scenarios requiring hover, like hover menus, via a press and hold user interaction pattern.
Important This feature is not supported in IE11 on Windows 7.
Whereas a mouse or pen input device can hover over an element without activating it, there's no touch analog to hovering the cursor over a page element. Touching an element, like the title of a drop-down menu, both hovers (expands the menu) and activates it (navigates to the menu title link) at the same time, making it impossible to select other options from the drop-down menu.
Starting with Internet Explorer 10 on Windows 8, you can use the aria-haspopup property to indicate that an element has hidden hover content, so that IE simulates a hover on the first tap, rather than activating the link.
With IE11 on Windows 8.1, touch device users can differentiate between hover (press and hold) and click (tap) with simple and intuitive gestures.
| Mouse gesture | Analogous touch gestures | ||
|---|---|---|---|
| IE10 on Windows 8 | IE11 on Windows 8.1 Preview | IE11 on Windows 8.1 | |
| Click | Tap | ||
| Hover | Tap (when aria-haspopup is specified on the element) | Press and hold | Tap (when aria-haspopup is specified on the element), or Press and hold (on any element) |
| Un-hover (leave the hover state) | Tap elsewhere on the page (outside the element) | ||
In Internet Explorer 10, the press and hold gesture activates the page context menu (Copy, Open link, etc.), which can block the visibility of a hover menu. In IE11, the page context menu now surfaces as a Windows app bar at the bottom of the page.
Starting with Internet Explorer 10, all touch hover simulation features for any given element (whether by tap or press and hold) can be disabled by specifying aria-haspopup="false" on the element.
UX best practices
Hover-based user experiences are fundamentally not optimized for touch, and there's no standardized way for web browsers to respond to touch input in such scenarios. Additionally, hover menus are generally poor for accessibility and not ideal for mouse efficiency either.
The best practice is to not use hover to hide content that a user can interact with. Instead, consider using the click event to toggle the visibility.