0

I've created an HTML email where the text is intended to react to a hover or a touch. You can test it on jsFiddle.

<html>
<head>
  <style>
    span {
      float: right;
      color: #222; 
    }
    span:hover,
    span:active,
    span:hover ~ span,
    span:active ~ span {
      color: #fff;   
      text-shadow: 0 0 16px #ffd;
    }
  </style>  
</head>
<body style="background-color:#000;font-size:16vw; font-family: Times,'Times New Roman',serif;" ontouchstart="">
<span>e</span><span>e</span><span>s</span><span>&nbsp;</span><span>o</span><span>t</span><span>&nbsp;</span><span>h</span><span>c</span><span>u</span><span>o</span><span>T</span>
</body>
</html>

This works fine when viewed in Thunderbird or Apple Mail, but on iPhone, there is no reaction on the Mail application on iPhone.

I have read here that the :active pseudo-class is not activated unless there is a touch event associated with the element, and this works when you visit the jsFiddle demo in Mobile Safari. However in iOS Mail, it has no effect.

Is there a solution for this?

Community
  • 1
  • 1
James Newton
  • 6,623
  • 8
  • 49
  • 113

1 Answers1

1

hover and active are not accepted by iOS or really any major mobile email client that I am aware of.

Ref (https://www.campaignmonitor.com/css/)

Gortonington
  • 3,557
  • 2
  • 18
  • 30