:hover pseudoclass selector in email for 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.

来源：https://stackoverflow.com/questions/25812613/hover-pseudoclass-selector-in-email-for-gmail

标签

javascript

css

gmail

pseudo-class