悬停在电子邮件模板中的 Gmail 和 Outlook 2007 中不起作用答案

【问题标题】：Hover not working in Gmail & outlook 2007 in Email template悬停在电子邮件模板中的 Gmail 和 Outlook 2007 中不起作用
【发布时间】：2019-02-08 07:07:05
【问题描述】：

我创建了一个 电子邮件模板，它在 gmail 和 Outlook 中正常工作，我遇到的主要问题是当我尝试更改 链接的颜色 > 悬停后变为黄色，它不起作用，您能给我建议一个解决方案吗？并感谢

.sommaireeLinks {
color:#F2F2F3 !important;
}
.sommaireeLinks a:link {
color:#F2F2F3 !important;
}

.sommaireeLinks a:hover {
color:#fdbf5a !important;
}

.sommaireeLinks a:visited {
color:#fdbf5a !important;
}
a:visited {
color:#fdbf5a !important;
}

<li style="color: #F2F2F3; font-family: Cambria; font-size: 10pt; font-weight: normal; line-height: 1em; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;margin-left:0;" class="">
	<span style="color:#FF0000; line-height:1.1em;margin-left:0;"><b><xsl:value-of select=""/></b></span><a href="#{$}" style="font-size: 10pt;font-family:Cambria; text-decoration: none; font-weight:normal;margin-left:0;;color:#F2F2F3"><xsl:value-of select="" /></a></li>

【问题讨论】：

我认为 Gmail 不关心 css ......它只需要内联 css。你一定要试试瘦CSS inliner
是的，但是如何在内联 CSS 中添加悬停？
我认为你不能，你尝试过使用 CSS 内联吗？
您的列表缺少课程sommaireeLinks。添加它就可以了。

标签： html css email xslt html-email

【解决方案1】：

是的，有一种方法可以包含悬停效果。您可以参考：

https://litmus.com/blog/interactive-email-for-beginners-6-interactive-elements-you-can-add-to-your-emails-today

【讨论】：

请不要发布外部资源的链接。把页面的主要部分放在你的答案中。如果需要，您可以将其链接为来源。原因是如果页面关闭，这个答案将不再可用。