:在电子邮件中悬停gmail的虚拟类选择器 [英] :hover pseudoclass selector in email for gmail
问题描述
它的结构如下:
< style type =text / css>
.elements {
/ *其CSS * /
}
.elements:hover {
/ * Hoverd CSS更改背景和颜色* /
}
< / style>
< center>
实际邮件正文< a class =elementshref =URL>元素< / a>
< center>
,我知道 gmail
不支持< style>
但是支持 inline-style
。
所以我试过这个:
< center>
实际邮件正文< a class =elementshref =URLstyle =这里的样式>元素< / a>
< center>
但现在我的问题是:hover
pseudoclass不能转换为内联样式
,所以我试图用 JavaScript
来模仿它:
< center>
实际邮件正文< a class =elementshref =URL
OnMouseOver =this.style.background ='#ddeeff'; this.style ['color'] ='#555555 ;
onmouseout =back-to-original-css>元素< / a>
< center>
但这并没有帮助我。
所以有没有办法使:hover
伪类工作在 gmail
邮件客户端
另外我不认为这是不可能的(看看您的
邮件,他们可以发送这样的邮件。) gmail
帐户中的g +的
任何
这个问题有很多争议,但是在这里是我发现的准备墙壁文字。看来,您可以使用解决方法来使< style>
正常工作,如此处。
以下是实际报价:
Gmail将类和id属性从所有元素,但留下一些
其他属性完整:style,title,lang,width,height,alt,href。
由于href和alt在技术上不合法div的属性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:活动
EF
E> F
E + F
E〜F
摘要Gmail如何处理样式标签(在电子邮件中)CSS。
.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:闪烁
类是用于hotmail ,因为它不显示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.
这篇关于:在电子邮件中悬停gmail的虚拟类选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!