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

【问题标题】：How is Gmail Email allowing Hover effect?Gmail 电子邮件如何允许悬停效果？
【发布时间】：2016-09-29 04:56:17
【问题描述】：

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

据我了解，Gmail 删除了添加到 HTML 电子邮件文档的 <head> 部分的任何内容。在检查元素时，我发现悬停效果样式是从<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>

<head>中<style>里面的CSS如下

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

他们是如何做到这一点的？

【问题讨论】：

标签： html css email gmail

【解决方案1】：

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

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

虽然我没有在 Google 资源中找到这个，但似乎也只有部分用户支持 :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

【讨论】：