Question

我收到了Behave Annual的电子邮件邀请我参加活动。在他们的时事通讯上遇到了一些非常奇怪的事情。所有按钮和文本的某些部分都有CSS悬停效果。鼠标悬停时，颜色会发生变化。

根据我的理解，Gmail删除了添加到HTML电子邮件文档的<head>部分的任何内容。在Inspect Element上，我发现悬停效果样式从<head>部分加载。

这是DOM -

<table width="250" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;border-radius:4px" bgcolor="#C012C9" lang="x-cta">
<tbody
<tr>
    <td height="52" valign="middle" align="center" style="vertical-align:middle;font-size:18px;text-align:center;font-family:Arial,Helvetica,sans-serif,'Work Sans';font-weight:bold;letter-spacing:.08em"><a href="http://mkto-ab090038.com/x0F0000k1j507RJ0SR5jXVG" style="text-decoration:none;color:#fffffe" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://mkto-ab090038.com/x0F0000k1j507RJ0SR5jXVG&amp;source=gmail&amp;ust=1475210579576000&amp;usg=AFQjCNHzAxSjelTbM4Ko3G9gP-viljOzOw"><img src="https://ci4.googleusercontent.com/proxy/w_W_24g8lpz0y_rVlaX7m8vTQNv1CXL00edUPLYMHSwY8oEtD7ns-a-IWxZsBcjHrrFffonr-da-qa-_vITS05DwmYTE_IIv-Q7Yv_3TyoMmH8fNTqnTIKUFS0hyMCD5dcH2JQVnr6VpmkrOH5tgMTI3YeRG=s0-d-e1-ft#https://assets.bounceexchange.com/assets/uploads/users/700/38798606b59c4fe750c8af1b3c0e0461.png" style="display:block;margin:0 auto;border:0;white-space:pre-wrap;text-align:center" alt="LOOK INSIDE" class="CToWUd"></a>
    </td>
</tr>    
</tbody>
</table>

<style>中<head>内的CSS如下

div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
    background-color: #c7dd40!important;
}
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
    background-color: #c7dd40!important;
}

他们如何才能实现这一目标？

Answer 1

Google今年已在电子邮件客户端更新支持，现在可以提供更多支持：

Gmail＆amp; Inbox支持丰富的CSS属性子集＆amp;媒体查询，以帮助您确保您的邮件格式符合您的预期... 标准<style>标签现在可以包含在HTML正文中，无需使用内联样式。 source

虽然我在谷歌资源中没有找到这个，但似乎只有部分用户支持:hover。来自https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.upjtbzcjm

的图片

看起来也有一些黑客让:hover工作也存在：https://litmus.com/community/discussions/1275-gmail-app-gmail-webmail-and-inbox-metrics

Gmail电子邮件如何允许悬停效果？

1 个答案: