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>