How is Gmail Email allowing Hover effect?

Question

I receive emails from Behave Annual inviting me to events. Came across something very weird on their newsletter. All buttons and some portions of text had CSS hover effects. On mouse hover, the color would change.

From my understanding, Gmail stripped anything added to the <head> portion of a HTML email document. Upon Inspect Element, I found the hover effect style to be loading from the <head> portion.

This is the DOM -

<table width="250" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;border-radius:4px" bgcolor="#C012C9" lang="x-cta">
<tbody
<tr>
    <td height="52" valign="middle" align="center" style="vertical-align:middle;font-size:18px;text-align:center;font-family:Arial,Helvetica,sans-serif,'Work Sans';font-weight:bold;letter-spacing:.08em"><a href="http://mkto-ab090038.com/x0F0000k1j507RJ0SR5jXVG" style="text-decoration:none;color:#fffffe" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://mkto-ab090038.com/x0F0000k1j507RJ0SR5jXVG&amp;source=gmail&amp;ust=1475210579576000&amp;usg=AFQjCNHzAxSjelTbM4Ko3G9gP-viljOzOw"><img src="https://ci4.googleusercontent.com/proxy/w_W_24g8lpz0y_rVlaX7m8vTQNv1CXL00edUPLYMHSwY8oEtD7ns-a-IWxZsBcjHrrFffonr-da-qa-_vITS05DwmYTE_IIv-Q7Yv_3TyoMmH8fNTqnTIKUFS0hyMCD5dcH2JQVnr6VpmkrOH5tgMTI3YeRG=s0-d-e1-ft#https://assets.bounceexchange.com/assets/uploads/users/700/38798606b59c4fe750c8af1b3c0e0461.png" style="display:block;margin:0 auto;border:0;white-space:pre-wrap;text-align:center" alt="LOOK INSIDE" class="CToWUd"></a>
    </td>
</tr>    
</tbody>
</table>

The CSS inside <style> in <head> is as follows

div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
    background-color: #c7dd40!important;
}
div.m1577254c07a8a7f6 * [lang=x-cta]:hover {
    background-color: #c7dd40!important;
}

How are they able to acheive this?

bets · Accepted Answer · 2016-12-06 13:24:18Z

4

Google has updated support this year in email clients and now more is possible:

Gmail & Inbox support a rich subset of CSS properties & media queries to help you ensure that your message is formatted the way you intended... standard <style> tags can now be included in HTML bodies, eliminating the need to use inline styles. source

Though I haven't found this in a Google sources, it also seems that :hover is supported only for part of the users. Image from https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.upjtbzcjm

It also looks like some hack to get :hover working exists too: https://litmus.com/community/discussions/1275-gmail-app-gmail-webmail-and-inbox-metrics

answered Dec 6, 2016 at 13:24

bets

84010 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How is Gmail Email allowing Hover effect?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related