Question

我正在从我的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伪类工作？

此外，我认为这是不可能的（请查看g+'s帐户中的gmail邮件。他们可以发送此类邮件。）

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

Answer 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的电子邮件中悬停伪类选择器

1 个答案:

编辑：