Definition
A CSS hover state is a style that applies when the user places their cursor over an element. In email this typically means changing the appearance of a link or button on hover — a colour shift, a background fill, an underline, or a border change. Hover styles can make an email feel more interactive and guide attention toward a call to action.
However, hover support in email is inconsistent. Native apps and desktop clients with full webkit rendering often honour :hover, while Gmail's apps and Outlook have limited or no support, meaning the hover style never appears for a large share of recipients.
Hover Support by Client
| Email Client | Hover Support |
|---|---|
| Apple Mail (desktop) | Full :hover support |
| Apple Mail (iOS) | No hover (touch device) |
| Gmail (desktop & app) | No :hover support |
| Outlook (desktop) | Limited :hover support |
| Outlook (mobile) | No hover (touch device) |
| Most other native apps | Partial support |
Because touch devices have no cursor, hover states are inherently irrelevant for mobile recipients regardless of the client.
How to Use Hover States Wisely
- Never make the CTA depend on hover: The action must be visually obvious without any hover interaction, since most recipients will never see a hover state.
- Treat hover as enhancement: Use it to add polish on supported clients while keeping the base state fully complete on its own.
- Scope hover styles safely: Apply changes that are purely visual — colour, background, underline — rather than layout changes, because unsupported clients ignore them.
- Test on supported clients: Confirm the hover effect works in Apple Mail desktop and any client where you intend to rely on it.
Example
.btn:hover {
background-color: #06b6d4;
color: #ffffff;
text-decoration: none;
}
On clients that support :hover, the button fills with colour when hovered. On Gmail, the same email simply shows the un-hovered button, which is why the base style must be complete on its own.
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
In some clients, yes. Apple Mail and several native desktop apps support CSS `:hover`. Gmail, Outlook and all touch-based mobile clients do not, so hover effects are not universal and should never be essential to using the email.
No. Gmail's email renderer strips or ignores `:hover` pseudo-classes, so hover styles do not apply in Gmail. Designers should design emails that are fully functional and attractive without any hover interaction.
No. Since most opens happen on mobile and across clients that ignore hover, a call to action should always look complete and clickable in its resting state. Treat hover purely as an enhancement for the subset of recipients who will see it.
Use approaches with broader support, such as AMP for email, interactive carousels, or CSS animations that do not depend on a hover state. Keep any interaction designed to work without a cursor so all recipients experience it.