Gmail邮件中CSS :hover伪类失效问题及解决方案

已解决方案：
执行以下操作步骤即可实现需求：创建>常规邮件>内容（设计邮件）>自定义代码>粘贴代码

问题背景 #

我通过MailChimp给Gmail用户发送企业邮件时，想添加CSS :hover 伪类效果。该效果在MailChimp预览中完全正常，但发送到Gmail后就失效了。

我了解到Gmail过去仅支持内联CSS，对<style>标签的支持存在争议，但现在已支持通过<style>添加样式（已验证边框等样式可正常显示），唯独:hover效果无法生效。想确认：该效果是否可实现？若可行，移动端是否支持？

用户提供的代码 #

嵌入式CSS

.grow {transition: 0.3s !important;} 
.grow:hover {background-color: #298aae !important;
height: 50px !important; position: relative !important; 
transition: 0.3s !important;}

HTML结构（标签弹窗并变色）

<table border="0" cellpadding="0"
cellspacing="0" align="center"><tr><td
height="60" align="center" valign="bottom"
style="vertical-align:bottom;">
<table class="grow" border="0" width="270" height="30" cellpadding="0" cellspacing="0" bgcolor="#187395" align="center"><tr>
<td align="center" height="30" valign="top" style="vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 19px; color: #ffffff; text-align:center; display:block; height: 30px;">
Pop-Up Tab
</td></tr></table></td></tr></table>

额外说明 #

• 使用MailChimp的自定义代码模式，能避免平台自动修改或剥离CSS规则，确保:hover伪类被Gmail正确识别。
• 移动端Gmail中，:hover伪类会转化为触摸交互（通常为点击后的短暂状态或长按触发），建议在移动设备上测试实际表现。

内容的提问来源于stack exchange，提问作者JoseTurron