有没有办法在 html 电子邮件中的“a:hover”上的 href 链接上设置内联样式？

Posted 2023-03-15

【中文标题】有没有办法在 html 电子邮件中的“a:hover”上的 href 链接上设置内联样式？

【英文标题】：Is there a way to set an inline style on an href link on "a:hover" in a html email?

【发布时间】：2011-02-24 01:53:10

【问题描述】：

问题是要知道是否有一种方法可以构建带有内联样式的 html 电子邮件（没有 CSS 文件，也没有 <style> 标签），href 链接会在鼠标经过它们时做出反应：只是为了能够更改颜色字体。

所以，没有 JS，没有脚本，没有 <style>，只有 <a href="http://www.dot.com style="....">link</a>

【参考方案1】：

没有。

您不能通过 style 属性应用伪类（或出现在选择器中的任何其他内容）。

【参考方案2】：

内联样式的正常 HTML 方式是：

<a href="url" style="color:#cfe7fe";">Click me!</a>

但我不确定这在电子邮件模板中有多可靠。

你总是可以试试：(Although deprecated)

<font color="blue"> <a href="url">Click me!</a> </font>

希望对你有帮助。

编辑：对于内联悬停尝试使用：

onmouseover="this.style.color='blue';" 
onmouseout="this.style.color='black';"

但我再次不确定是否支持电子邮件。

【讨论】：

我的意思是当鼠标飞过链接时颜色会发生变化。

【参考方案3】：

一些电子邮件客户端支持style 标签，因此定义了伪选择器。根据这份清单：

Guide to CSS support in E-Mail clients

:hover 得到大量客户的支持。

如有必要，您应该能够将<style> 标记滑入正文。这是无效的，但丰富的电子邮件是一个雷区，这几乎无关紧要。

:hover 我认为是你唯一的机会。内联定义伪选择器是不可能的，并且 javascript 已被淘汰，因为它将被大多数（或所有？）客户端阻止。

【参考方案4】：

您可以，但是不能更改下划线的颜色。您可以将链接文本包装在 div 中，然后将 div 包装在链接中，如下所示：

<a href="http://www.google.com"><div style="margin: 0px;padding: 20px 50px;font-size: 50px; color: red;">GOOGLE</div></a>

“GOOGLE”一词将显示为红色，但带有蓝色下划线。所以这并不能完全解决你的问题，我不认为。