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

Posted

技术标签:

【中文标题】悬停在电子邮件模板中的 Gmail 和 Outlook 2007 中不起作用【英文标题】:Hover not working in Gmail & outlook 2007 in Email template 【发布时间】: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。添加它就可以了。 【参考方案1】:

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

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

【讨论】:

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

以上是关于悬停在电子邮件模板中的 Gmail 和 Outlook 2007 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Laravel电子邮件模板网址无法在Gmail中使用

Zurb Ink 电子邮件在 Gmail 中的格式不正确

Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像

如何在 html 电子邮件模板中覆盖 gmail 视口?

Gmail 将“position:relative”删除为内联 CSS(电子邮件模板)

mailchimp 电子邮件在 gmail 中未正确显示