:hover 用于 gmail 的电子邮件中的伪类选择器答案

【问题标题】：:hover pseudoclass selector in email for gmail:hover 用于 gmail 的电子邮件中的伪类选择器
【发布时间】：2014-11-06 21:18:54
【问题描述】：

我正在从我的php 脚本发送一些邮件。

它的结构如下：

<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>

这在除gmail 之外的所有邮件客户端中都可以正常工作。所以快速搜索SO 将我带到：HTML formatted email not showing up at all in Gmail but is in other mail clients

我知道gmail 不支持<style> 但支持inline-style。

所以我尝试了这个：

<center>
Actual Mail Body <a class="elements" href="URL" style="it's style here">Element</a>
<center>

但现在我的问题是:hover伪类不能转换为inline-style，所以我尝试用JavaScript模仿为：

<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>

但这对我没有帮助。

那么有什么方法可以让:hover 伪类在gmail 邮件客户端中工作？

我也不认为这是不可能的（看看你gmail帐户中的g+'s邮件。他们可以发送这样的邮件。）

欢迎任何想法、想法、建议，提前致谢。

【问题讨论】：

如果是 gmail 发送的，您是否使用 chrome 开发工具查看了电子邮件以了解他们是如何处理的？
@Jeff，我试过了，但我无法指出代码。另外我认为他们支持javascript 接收g+ 的邮件，因为它可以打开popup、aria-label、add freinds to your circle 而无需访问g+ 的网站。
看起来 JavaScript 正在注入样式。你也可以这样做。这个 SO 可能会让你开始。 stackoverflow.com/a/15506705/2055676

标签： javascript css email gmail pseudo-class

【解决方案1】：

嗯，关于这个主题有很多争议，但是，这就是我发现的。 准备一堵文字墙。看来您可以使用解决方法使<style> 工作，如here 所述。

以下是实际报价：

Gmail 会从所有元素中删除 class 和 id 属性，但会留下一些其他属性不变：样式、标题、语言、宽度、高度、alt、href。

因为 href 和 alt 在技术上不是 div 的合法属性，所以我决定不使用它们，即使你愿意的话。一种主要候选人将是头衔 - 但是头衔附带一个副作用——当用户将光标悬停在元素上时，标题将可见。

我选择了 lang 属性，因为它是一个通用属性（有效对于所有元素）悬停时不可见。自然我们没有将此属性用于其预期目的 - 但有 HTML 规范中的技术例外，允许我们使用这样。通过在属性值前面加上“x-”，这表示 lang 属性对客户端，据我所知，目前没有电子邮件客户端处理 lang 属性。

细分

以下是我尝试并找到的所有样式的总分类在 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

Gmail 如何处理样式标签（在电子邮件中）中的 CSS 的摘要。

.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! :)

免责声明：这篇文章不是我写的，我不相信它。

编辑：

我对其进行了测试，它适用于 gmail 和 Outlook (hotmail)。

我使用的代码：

<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：blinking 类用于 hotmail，因为它不显示 gmail 解决方法。

【讨论】：

感谢您花时间解决这个问题。但是 gmail 也从<head> 中剥离了<style> 标签。所以这对我没有帮助。
@VedantTerkar我刚刚测试过了。有用。 Gmail 只删除了文章中提到的一些样式。
Gmail 会去除通过 Google for Work 托管的域的 <style> 标记（如果它们位于“标准版本”轨道上）。 “快速发布”轨道上的@gmail.com 地址和 Google for Work 域将保留样式标签。