What is the technique behind Gmail Email's Hover effect implementation?

Behave Annual keeps sending me emails about upcoming events. Recently, I noticed something strange in their newsletter. All the buttons and some text sections had CSS hover effects applied to them. When you hovered over them with your mouse, the color would change.

I was under the impression that Gmail removes anything added to the <head> section of an HTML email document. However, when I inspected the element, I discovered that the hover effect style was loading from the <head> section.

This is what the DOM looks like:

<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 within <style> in the <head> section looks like this:

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

I'm curious how they are able to achieve this unique styling?

htmlcssemailgmail

Answer №1

Google's recent updates have expanded support for CSS properties and media queries in email clients, allowing for better formatting options:

Gmail & Inbox now allow for a rich subset of CSS properties and media queries to ensure your message is displayed as intended. You can now include standard style tags in HTML bodies, eliminating the need for inline styles. source

Although not officially confirmed by Google, it appears that the use of ":hover" is only supported for certain users. https://i.sstatic.net/kh5sp.png Image source:

There are also hacks available to enable ":hover" functionality:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to successfully submit a request for login information using an AJAX call

I need to capture the user ID and password entered by the user and send it to the Server. Here is the Javascript code I am using: <script> function Display(){ var ID = document.getElementById("user_id").value; document.getEl ...

javascripthtmlajax

Nodemon causing crashes in basic HTML pages

Having trouble getting a basic index.html page to work with nodemon. index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </hea ...

javascripthtmlnodemon

When I try to call jQuery's getScript function, the callback does not execute as expected within

When I invoke the script in a function at runtime function CheckOutMyFace() { $.getScript("/scripts/jtimers.js", function (data) { }); }; I notice in Firebug that the script is being called every time the function is invoked, but for some reason the ...

htmlcss

Take out the gutter spacing between card columns in Bootstrap 4

Is there a way to eliminate the spacing between rows and columns in Bootstrap 4's .card-columns container? ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Adding an image to a select option in HTML using PHP - A step-by-step guide

How can I include an image within a select option using PHP in HTML? The image needs to be retrieved from a database first. echo '<option value='.$ifet['productimage'].'><img src='.$ifet['productimage'].&a ...

javascriptphphtml

What is the best way to eliminate YouTube branding from a video embedded in a website?

I am currently utilizing an <iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> This setup removes the "YouTube" logo from the ...

javascripthtmlyoutube-iframe-api

Warning issued after numerous clicks

My goal is to implement an Alert System that notifies the user when they leave a field empty. Currently, if a field is left empty and the next button is clicked, an alert pops up. However, if the same field is left empty again and the button is pressed, mu ...

javascriptjqueryhtml

Generate a new nested div if there is already a different child present at the specified coordinates (x, y)

My goal is to add a textarea to a sidebar on the right whenever a click is made on the page. The current code I have is as follows: $('#page_to_be_clicked').click(function(e){ var offset = $(this).offset(); var comment_box_y_coord = e.pa ...

javascriptjqueryhtmlcssposition

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

javascripthtmlcanvas

How can I align an image and text alongside another image using HTML and CSS?

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

htmlcss

Utilizing Google Tag Manager to save the identifier of a selected div or button

After searching high and low, and reading extensively, I still couldn't find the answer... I am managing a website where Google Tag Manager is in place, and I am trying to retrieve the ID of a clicked button (or its parent). This is my code snippet: ...

javascriptjqueryhtmlgoogle-tag-manager

Tips for placing a large image within a small div

I have an image with a ratio of 1920*1300 that I want to be displayed on any device the website is viewed and cover the entire div. Check out my code below: .carousel { width: 100vw; height: 80vh; position: relative; } .carousel a { width: 1 ...

htmlcssimage

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

javascriptjqueryhtmlcss

How to activate an ASP.NET LinkButton using JavaScript

I've set up a page to hide a FileUpload control, so that when a button is clicked, it displays the file upload window and automatically submits the selected file to the server. To make this work, I created two linkbuttons and a file upload control, b ...

c#javascriptasp.nethtml

What makes table layouts load pages more quickly?

Is it true that Google uses tables for layout because they load faster? I'm skeptical of this claim, as a CSS based layout with minimal and semantic markup seems like it would be more efficient in terms of page load time. It is commonly believed that ...

htmlcsstablelayout

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

Styling HTML elements with CSS in ASP.NET

<style type="text/css> .style1 { border:2px solid #e53a6f; box-shadow:0 0 5px 0 #e53a6f; } </style> javascript <script type="text/javascript" language="javascript"> if (Pname == "") { document.getElementById(' ...

asp.netcss

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

phphtmlcss

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

javascriptandroidhtmlcssreact-native

Turn off transparency for the child element if the parent element has transparency

In my design setup, there is a container with an opacity set at 0.8. This allows the background image to subtly shine through the content area. The challenge arises when I place a client photo inside this container. The issue is that the photo's opac ...

htmlcss