: hover pseudoclass selector in email for gmail
I am sending mail from my php script.
it has a 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 great in all email clients except gmail . Therefore, a quick SO search led me to: An HTML-formatted email address that does not appear at all in Gmail, but is located in other email clients
and I found out that gmail does not support <style> , but supports inline-style .
So, I tried this:
<center> Actual Mail Body <a class="elements" href="URL" style="it style here">Element</a> <center> But now my problem is :hover pseudo-class cannot be converted to inline-style , so I tried to simulate it using 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 did not help me.
So, is there a way to do :hover pseudo-class in gmail mail client?
Also I don't think this is impossible (look at g+'s mail in your gmail account. They can send such emails.)
Any thoughts, ideas, suggestions are welcome, thanks in advance.
Well, there is a lot of controversy on this, but here is what I found. Get ready for the text wall . It looks like you can use the workaround for <style> to work as indicated here .
Here are the actual quotes:
Gmail separates the class and identifier attributes from all elements, but leaves some other attributes intact: style, name, lang, width, height, alt, href.
Since href and alt are not technically legal attributes for divs, I decided not to use them, even if I could, if I wanted to. the main candidate will be the title - however, the name comes with one side effect - when the user hovers over an element, the title will be visible.
I chose the lang attribute because it is a universal attribute (valid for all elements) that are not visible when it hangs. naturally did not use this attribute for its intended purpose, but theres a technical exception in the HTML specifications that allow us to use it like this. Pre-expecting the value of the attribute with "x-", this means that the lang attribute should not make sense to the client, and as far as I know, no mail client currently processes the lang attribute anyways.
Structure
That's the whole breakdown of all the styles that I 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 EF E > F E + F E ~ F
A brief description of how Gmail handles CSS in a style tag (in a letter).
.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 do not accept responsibility for this.
EDIT:
I tested it, it works both in gmail and in 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 blinking designed for hotmail, as it does not display a gmail workaround.