个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我正在从我的 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邮件。他们可以发送这样的邮件。)
欢迎任何想法、想法和建议，在此先感谢。
最佳答案
关于这个主题有很多争议，但这是我发现的。 准备一堵文字墙。看来您可以使用解决方法来制作 <style>工作，如所述here .
以下是实际报价:
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
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>
附注:blinking类适用于 hotmail，因为它不显示 gmail 解决方法。
关于javascript - :hover pseudoclass selector in email for gmail，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25812613/
25
4
0
我有这段代码，它使用纯 CSS 显示了一个小三 Angular 形，它适用于所有现代浏览器，包括 IE8-IE9: .arrow:after {
我对这个链接上回答的问题进行了跟进: ckecked element number in :nth-child css rule 答案正是我要找的，但我不知道如何在页面加载时将第一个选项卡设置为默认选
这个问题在这里已经有了答案: CSS negation pseudo-class :not() for parent/ancestor elements (2 个答案) 关闭 3 年前。 我正在尝试
有没有办法以编程方式让 D3 在选择中添加“:hover”？如果没有，我如何使用直接的 JavaScript 来做到这一点？ 最佳答案 您不能通过 JavaScript(或 D3)以编程方式添加 :h
有人知道如何用jquery制作这些悬停效果吗？ https://tympanus.net/Development/CreativeButtons/ 谢谢，我正在努力学习，我不需要购买或下载表格 我刚刚
我有一个按钮，当它被点击时会改变它的设计。 (根据 CSS)简单。 但我还想启用如果您按 ENTER 也应该按下的功能。这行得通，但我有一个伪类，它将按钮的大小设置为 90% (.button:pre
如果这个问题已经有答案，请原谅我，但我找不到。 毕竟我想加一个星号元素。 我发现我可以使用 :required 来设计这些样式选择器。 我想使用 :after添加星号的伪元素。 我的 CSS: *:r
我在 StackOverflow 上看到了几种解决方法，但似乎没有一种能充分解决我想要实现的目标。 现场演示: var value = 0, pos = 0, progressHidd
我在 IE 10 和 11 中偶然发现了一些奇怪的行为。相邻的兄弟 CSS 组合器有效。 (+) :valid 和 :invalid 伪类有效。但是当你把它们放在一起时，它们会变得很奇怪。 拿这个ht
悬停 psuedoclass 似乎不适用于 ng-class ...有什么想法吗？这是一个示例: http://jsfiddle.net/75n6w/11/ .orange {color:o
我有一个网页无法在 Safari 中正确显示。 :active 伪类(按下时应该将按钮变成黄色)不起作用。当然，它适用于任何其他浏览器。 应用了这个解决方案，但没有用: :active pseudo-
在中，Douglas 介绍了所谓的“伪经典”模式作为实现继承的方式之一。不过，他给出的例子似乎无法实现成员变量的继承，因为原型(prototype)继承在构造“子类”时不会创建“父类(super cl
我正在尝试使用 :active 突出显示此布局的不同选项。问题是突出显示没有填满整个内容。这是一张图片以及我的 CSS 和 HTML 代码。希望你们能帮助我。
看了this question之后，我想知道如何做相反的事情。 我已经为要创建的按钮创建了一个主类，我将通过 myButton.style.backgroundImage 为每个按钮设置不同的背景。但
我正在制作移动菜单，但是 :nth-child 伪类不工作这是 HTML: Home O Mnie
如果我写 h1:hover, li:hover {color:green;} h1 和 li 元素都获得悬停效果。 Buf 如果我写: *:hover {color: green;} 这只对 anch
我在场景中有一些 TableView，我想在其中突出显示所选的单元格。根据JavaFX CSS reference , Cells 上有一个伪类 :selected ，所以我尝试了以下 css: .c
我已阅读此 sitepoint page和 quirksmode page关于新:empty伪类。 Sitepoint表示，即使附加了动态内容，空样式仍然会生效。值得注意的是，firefox 就是这种
我正在从我的 php 发送一些邮件脚本。 它的结构如下: .elements{ /*its CSS*/ } .elements:hover{ /* Hoverd CSS changes backgr
我的网站上有一些 css 菜单，可以使用 :hover 扩展(没有 js) 这在 iDevices 上以半损坏的方式工作，例如点击将激活 :hover 规则并展开菜单，但点击其他地方不会删除 :hov
我是一名优秀的程序员,十分优秀！