Definition
Hover effects apply styles when a pointer is over a link or button. They work only in clients with full CSS support, so treat them as progressive enhancement.
Always pair them with a static default state.
Hover effects add interactivity where supported, but only as progressive enhancement. Most clients and all touch devices ignore them, so a static default must carry the design. Treating them as optional avoids broken experiences.
Using Hover Safely
Treat hover as progressive enhancement with a safe default.
Test hover states in iOS Mail and Apple Mail.
Why It Matters
Hover effects add interactivity where supported, but only as enhancement. Understanding their limits prevents broken experiences.
Best Practices
- Treat hover as progressive enhancement with a safe default.
- Test hover states in iOS Mail and Apple Mail.
- Ensure styles also work with images and touch devices.
- Keep default state clear.
- Review which clients support hover.
Was this useful?
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.
AMP for Email
AMP for Email is a technology that allows interactive, dynamic content to live inside an email message, enabling forms, carousels and live updates.
Frequently Asked Questions
Apple Mail and iOS Mail primarily, with limited support elsewhere. Hover effects add interactivity where supported, but only as progressive enhancement.
Touch devices have no hover, so they rely on tap or ignore it. Most clients and all touch devices ignore them, so a static default must carry the design.
No, always pair with a static default state. Treating them as optional avoids broken experiences.
Colours, underlines, and other visual states. Hover effects add interactivity where supported, but only as progressive enhancement.
In supporting clients and on touch devices. Most clients and all touch devices ignore them, so a static default must carry the design.