如何在时事通讯中创建悬停效果？

Posted 2023-03-15

【中文标题】如何在时事通讯中创建悬停效果？

【英文标题】：How to create a hover effect in a newsletter?

【发布时间】：2011-02-17 07:40:35

【问题描述】：

我正在创建一个时事通讯，并且我想要在鼠标悬停时更改背景颜色的面板。 鉴于时事通讯不会有头，我正在定义所有样式内联。我很确定大多数流行的邮件客户端都会阻止 JS。所以我想知道是否可以在样式属性中定义悬停效果。或者有没有其他解决方案可以达到这个效果？ 和平

【问题讨论】：

虽然有人会认为 css 支持在邮件客户端中很常见，但您应该重新考虑：campaignmonitor.com/cssxavierfrenette.com/articles/css-support-in-webmail

@nc3b：很酷，本可以将其添加到答案中，我接受我不能使用伪内联

【参考方案1】：

你检查过这些吗？

http://www.campaignmonitor.com/css/

http://www.hongkiat.com/blog/design-perfect-newsletter/

后一篇文章是这样说的：

Outlook 2007/2010、Gmail、ios 或 android 不支持悬停效果。您可能仍希望为所有支持客户端包括 a:hover 样式：Outlook 2000/2003、Hotmail、Apple Mail 和 Yahoo!邮件...

javascript 是不行的。确实没有解决方案，有些人会接受 :hover，有些人不会。从第一个链接中，您可以看到哪个会，哪个不会。

【参考方案2】：

我确定你的 CSS 不会被删除，你可以使用 hover 和 background-color 属性

.panel:hover 
    background-color: #EFEFEF;

use a pseudo-selector in an inline style 似乎也不可能，所以这可能是一个障碍：

【讨论】：

我确定 CSS 已被删除，我已经测试了很多