Html 如何在时事通讯中创建悬停效果?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2796868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a hover effect in a newsletter?
提问by Moak
I'm creating a newsletter, and i want to have panels that change background-color on mouse over.
Seeing as the newsletter wont have a head, I am defining all styles inline. I'm pretty sure most popular mail clients will block JS. So I was wondering if I can define a hover effect in the style attribute. Or is there any other solution to achieve this effect?
Peace
我正在创建一个时事通讯,并且我想要在鼠标悬停时更改背景颜色的面板。
由于时事通讯不会有头,我正在定义所有样式内联。我很确定大多数流行的邮件客户端都会阻止 JS。所以我想知道是否可以在样式属性中定义悬停效果。或者有没有其他解决方案可以达到这种效果?
和平
回答by Roope
Have you checked these?
你检查过这些吗?
http://www.campaignmonitor.com/css/
http://www.campaignmonitor.com/css/
http://www.hongkiat.com/blog/design-perfect-newsletter/
http://www.hongkiat.com/blog/design-perfect-newsletter/
The latter article says this:
后一篇文章是这样说的:
Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail ...
Outlook 2007/2010、Gmail、iOS 或 Android 不支持悬停效果。您可能仍希望为所有支持的客户端包括 a:hover 样式:Outlook 2000/2003、Hotmail、Apple Mail 和 Yahoo! 邮件 ...
Javascript is a no-go. There is really no solution to this, some will accept :hover, some not. From that first link you can see which will and which will not.
Javascript 是行不通的。对此确实没有解决方案,有些人会接受 :hover,有些人不会。从第一个链接中,您可以看到哪些会,哪些不会。
回答by nc3b
I you are certain your css will not be removed, you can use a hover and a background-color property
我确定您的 css 不会被删除,您可以使用悬停和背景颜色属性
.panel:hover {
background-color: #EFEFEF;
}
Also it does not seem possible to use a pseudo-selector in an inline style, so that might be a stopper:
此外,似乎不可能在内联样式中使用伪选择器,因此这可能是一个障碍: