Menu
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.
273
Information. Gmail allows you access to quickly archive, delete, mark as read, or snooze when you hover over the message in your inbox.
Hover effects are most popular when it comes to highlighting text (for example, highlighting a text link in your email copy). But they're also a simple but powerful tool to make other elements—including images, background images, or calls-to-action (CTAs)—interactive and more engaging.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. /* The first line of every <p> element.
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.
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
