：在电子邮件中悬停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 。
所以快速 SO 搜索引导我：

，我知道 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屋！