:hover Pseudo-Class Limitations on iOS Mail

Pseudo-classes such as :hover and :checked are work-horses of interactive email. However you should be aware that the :hover pseudo-class will only activate on certain elements in the iOS email client and knowing this can save you some headaches when troubleshooting your interactive email designs.

Links, Images and Labels

The :hover selector will only be triggered if the element that is targeted is a link, image or a label. Since there is no “hover” action on touch devices, the :hover selector becomes activated when the user taps on an element.

<style>
.mylink:hover{background-color:yellow;}
</style>
<a href="#link" class="mylink">Hello</a>

Applying the :hover selector to other elements will do nothing when the element is tapped.

Interestingly, the :hover selector will not be active on labels if the labels do not target a form element (ie. the “for” attribute in the label does not target an id of a form element).

Outlook iOS Anchor Quirk

It should be noted that in Outlook for iOS, when a user taps on a link with an anchor placeholder (ie href=”#test”) , Outlook will launch a browser and attempt to load the placeholder link.

If you want to apply the :hover selector to a link (vs an image) and have them work in Outlook for iOS, a quick hack is to hide the link and replace it with another element when the :hover selector is active. This may cause the element to “flicker” when the :hover state is triggered in desktop environments like Apple Mail, so you may want to only use this trick with a combination of a media query.

<style>
#link1:hover{display:none!important;}
#link1:hover + #link2{display:block!important;}
</style>
<a href="#r" id="link1" style="display:block">my link1</a>
<a href="#r" id="link2" style="display:none;">my link2</a>




Subscribe to the #EmailGeeks Newsletter

Latest Comments
  1. Ade-Lee Adebiyi

    This is awesome! Thanks!

  2. Cosmin

    For the hamburger menu icon in the Pine Email Framework, I simply used an anchor that has no href=”” attribute. This removes the need for any Outlook iOS fix. Tested on Android 4.4, Android Gmail, Android Outlook, Outlook iOS, iOS Mail, and Apple Mail.

    https://github.com/ThemeMountain/tm-pine

    • Justin

      Hey Cosmin, I tried removing href=”” from links and I cannot get :hover to work on them in iOS Mail.

Leave a Reply

Your email address will not be published. Required fields are marked *