{"id":3319,"date":"2017-02-05T03:26:25","date_gmt":"2017-02-05T03:26:25","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3319"},"modified":"2017-02-10T18:49:30","modified_gmt":"2017-02-10T18:49:30","slug":"hover-pseudo-class-limitations-on-ios-mail","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/hover-pseudo-class-limitations-on-ios-mail\/","title":{"rendered":":hover Pseudo-Class Limitations on iOS Mail"},"content":{"rendered":"

Pseudo-classes such as :hover and :checked are work-horses of interactive email<\/a>. 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.<\/p>\n

Links, Images and Labels<\/h4>\n

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.<\/p>\n

<style>\r\n.mylink:hover{background-color:yellow;}\r\n<\/style>\r\n<a href=\"#link\" class=\"mylink\">Hello<\/a>\r\n<\/pre>\n
Applying the :hover selector to other elements will do nothing when the element is tapped.<\/p>\n
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).<\/p>\n
Outlook iOS Anchor Quirk<\/h4>\n
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. <\/p>\n
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.<\/p>\n
<style>\r\n#link1:hover{display:none!important;}\r\n#link1:hover + #link2{display:block!important;}\r\n<\/style>\r\n<a href=\"#r\" id=\"link1\" style=\"display:block\">my link1<\/a>\r\n<a href=\"#r\" id=\"link2\" style=\"display:none;\">my link2<\/a><\/pre>\n



<\/p>\n
\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n
<\/p>\n