可以将 :hover 与 Foundation for Emails 一起使用吗？答案

【问题标题】：Possible to use :hover with Foundation for Emails?可以将 :hover 与 Foundation for Emails 一起使用吗？
【发布时间】：2018-07-24 17:28:53
【问题描述】：

我正在使用 Foundation for Emails 设计电子邮件通讯。我知道内联悬停样式并没有真正起作用。但是，具有悬停样式确实会为我的时事通讯增添一抹亮色。我想知道 Foundation 是否找到了一种方法来完成这项工作，以及我是否可以做些什么来在我的电子邮件中获取这些样式。

【问题讨论】：

您在这里遗漏了核心原则：电子邮件客户端必须使所有链接可见，以便无法隐藏普通文本中的链接。电子邮件应被视为高级文本消息，而不是网页。唯一允许的 html 和 css 方法是那些不可能被滥用的方法，这不是其中之一。

标签： html css hover zurb-foundation html-email

【解决方案1】：

是的，您可以在样式表中使用:hover，全局或特定：

a:hover, .linkname:hover {
  background: #ff0000 !important;
  border: 1px solid: #ff0000 !important;
}

除此之外，在 SASS 版本中，还有一个部分用于声明所有 href 值：

$anchor-text-decoration: none;
$anchor-color: $primary-color;
$anchor-color-visited: $anchor-color;
$anchor-color-hover: darken($primary-color, 10%);
$anchor-color-active: $anchor-color-hover;

您可以修改：$anchor-color-hover: darken($primary-color, 10%);，方法是调整值或输入您希望使用的颜色。

一些电子邮件客户端不支持:hover，但很多支持：

https://www.campaignmonitor.com/css/selectors/hover/

祝你好运。

【讨论】：

由于一些电子邮件客户端去除了嵌入/外部样式，这不是一个可靠的解决方案。
某些客户端无法使用:hover。那些不这样做的人会优雅地失败。它适用于 gmail、Apple、IOS，但适用于某些 gmail 移动客户端和 Outlook。这是一个很好的解决方案。