让 CSS 对 iPhone 上的电子邮件中的触摸做出反应

Question

我创建了一封 HTML 电子邮件，其中的文本旨在对悬停或触摸做出反应。您可以在 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>

这在 Thunderbird 或 Apple Mail 中查看时工作正常，但在 iPhone 上，iPhone 上的 Mail 应用程序没有任何反应。

我已在 Mobile Safari 中阅读 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。但是在 iOS 邮件中，它没有效果。

有解决办法吗？

Answer 1

悬停和活动不被 iOS 或我所知道的任何主要移动电子邮件客户端所接受。

引用 (https://www.campaignmonitor.com/css/)

让 CSS 对 iPhone 上的电子邮件中的触摸做出反应

Getting CSS to react to touch in an email on iPhone

css

iphone

html-email