：hover pseudoclass selector in email for gmail [英] :hover pseudoclass selector in email for gmail
问题描述
我从 php 脚本发送一些邮件。
它的结构如下：
< style type =text / css>
.elements {
/ *它的CSS * /
}
.elements：hover {
/ * Hoverd CSS更改背景和颜色* /
}
< / style>
< center>
实际邮件正文< a class =elementshref =URL>元素< / a>
< center>
这在所有邮件客户端都可以正常工作，除了 gmail 。
所以快速的 SO 搜索引导我： HTML格式的电子邮件不会在Gmail中显示，而是在其他邮件客户端
，我开始认识到 gmail 不支持< style> 但支持 inline-style 。
所以我试过：
< center>
实际邮件正文< a class =elementshref =URLstyle =it's style here>元素< / a>
< center>
但现在我的问题是：hover 不能转换为 inline-style ，所以我试着用 JavaScript 来模拟它：
< center>
实际邮件正文< a class =elementshref =URL
OnMouseOver =this.style.background ='＃ddeeff'; this.style ['color'] ='＃555555 ';
onmouseout =back-to-original-css>元素< / a>
< center>
但这没有帮助我。
所以有任何方法让：hover 伪类工作在
还有我不认为这是不可能的（看看他们可以发送此类邮件。）
任何人都可以在 gmail
这个问题有很多争议，但在这里是我发现的。 准备墙壁。您似乎可以使用解决方法使< style> 工作，如此处。
以下是实际的报价：
Gmail会将类别和ID属性所有元素，但留下一些
其他属性完整：style，title，lang，width，height，alt，href。
由于href和alt在技术上不合法属性为divs I
决定不使用它们，即使你可以，如果你想。 A
主题候选人将是标题 - 但标题带有一个
副作用 - 当用户将光标悬停在该元素上时，
标题将可见。
我选择了lang属性，因为它是一个通用的属性（所有元素都有效的
），在悬停时不可见。自然
我们没有使用这个属性用于它的预期目的 - 但是有一个技术异常在HTML规范，允许我们使用
这种方式的
。通过使用x-预先挂起属性值，这个
表示lang属性不意味着对
客户端有意义，据我所知，没有电子邮件客户端当前正在处理
lang属性。
细目分类
我尝试过的所有样式，并发现
在Gmail中使用：以下适用于Gmail：
* E [foo]
* E [foo =bar]
* E [foo〜=bar]
* E [foo ^ =bar]
* E [foo * =bar]
* E [foo $ =bar]
* E：hover
* E：link
* E：visited
* E：active
EF
E> F
E + F
E〜F
.divbox {..} //允许但无意义 - Gmail从元素中删除类属性
#divbox {..} //允许但无意义 - Gmail从元素中删除id属性
[class〜=divbox] {...} //由Gmail删除
* [class〜=divbox] {...} //允许但无意义 - 没有类属性
div {... } //允许但是太一般有用
div：hover {...} //通过gmail删除。没有伪类支持？不是那么快！
* div：hover {...} //允许！有趣的...
* [lang〜=x-divbox] {...} //允许！现在我们在说
* [lang〜=x-divbox]：hover {...} //允许！魔法！ :)
免责声明：本文不是由我写的，我不承认。
编辑：
我测试了它在gmail和outlook（hotmail）
我使用的代码：
< html&
< head>
< style>
* [title =divbox]：hover {
background-color：green！important;
颜色：白色
}
.blinking：hover {
background-color：green！important;
颜色：白色
}
< / style>
< / head>
< body>
< div class =blinkingtitle =divboxstyle =padding：10px; width：100px; height：40px;
background-color：#eeeeee;> Divbox Content< / div>
< / body>
< / html>
PS：闪烁 ，因为它不显示gmail的解决方法。
I am sending some mail from my php script.
it has structure like:
<style type="text/css">
.elements{
/*its CSS*/
}
.elements:hover{
/* Hoverd CSS changes background and color*/
}
</style>
<center>
Actual Mail Body <a class="elements" href="URL">Element</a>
<center>
and this works fine in all mail clients except gmail.
So a quick SO search lead me to: HTML formatted email not showing up at all in Gmail but is in other mail clients
and I came to know that gmail doesn't support <style> but supports inline-style.
So I tried this:
<center>
Actual Mail Body <a class="elements" href="URL" style="it's style here">Element</a>
<center>
But now my problem is :hover pseudoclass can't be converted to inline-style, So I tried to mimic it with JavaScript as:
<center>
Actual Mail Body <a class="elements" href="URL"
OnMouseOver="this.style.background='#ddeeff';this.style['color']='#555555';"
onmouseout="back-to-original-css">Element</a>
<center>
But that ain't helped me.
So is there any way to make :hover pseudo class work in gmail mail client?
Also I don't think this is impossible (have a look at g+'s mail in your gmail account. They can send such mails.)
Any thoughts, ideas, suggestion are welcome, thanks in advance.
Well there are a lot of controversy on the subject but, here is what I found. Prepare for a wall of text. It appears you can use a workaround to make <style> work, as stated here.
Here are the actual quotes:
Gmail strips class and id attributes from all elements but leaves some other attributes intact: style, title, lang, width, height, alt, href.
Since href and alt are not technically legal attributes for divs I decided not to use them even though you could if you wanted to. A prime candidate would be title – however title comes with one side-effect – when the user hovers the cursor over the element, the title would be visible.
I chose the lang attribute because it is a universal attribute (valid for all elements) that is not visible when hovered over. Naturally we’re not using this attribute for its intended purpose – but there’s a technical exception in the HTML specifications that allow us to use it this way. By pre-pending the attribute value with an "x-", this signifies that the lang attribute is not meant to be meaningful to the client and as far as I know, no email client currently processes the lang attribute anyways.
Breakdown
Here’s a total breakdown of all the styles I’ve tried and found working in Gmail:
The following works in Gmail: * E[foo] * E[foo="bar"] * E[foo~="bar"] * E[foo^="bar"] * E[foo*="bar"] * E[foo$="bar"] * E:hover * E:link * E:visited * E:active E F E > F E + F E ~ F
Summary of how Gmail processes CSS in a style tag (in the of the email).
.divbox {..} //Allowed but pointless - Gmail strips class attributes from elements
#divbox {..} //Allowed but pointless - Gmail strips id attributes from elements
[class~="divbox"] {...} //Removed by Gmail
* [class~="divbox"] {...} //Allowed but pointless - No class attributes
div {...} //Allowed but too generic to be useful
div:hover {...} //Removed by gmail. No pseudo class support? Not so fast!
* div:hover {...} //Allowed! Interesting…
* [lang~="x-divbox"] {...} //Allowed! Now we’re talking
* [lang~="x-divbox"]:hover {...} //Allowed! Magic! :)
Disclaimer: The article is not written by me, and I take no credit for it.
EDIT:
I tested it it works on both gmail and outlook (hotmail).
The code I used:
<html>
<head>
<style>
* [title="divbox"]:hover{
background-color: green !important;
color: white;
}
.blinking:hover{
background-color: green !important;
color: white;
}
</style>
</head>
<body>
<div class="blinking" title="divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</div>
</body>
</html>
PS: The blinking class is for hotmail, since it doesn't display the gmail workaround.
这篇关于：hover pseudoclass selector in email for gmail的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
