Skip to main content
Pseudo-Classes & Selectors

:hover

selector or pseudo-class · 8 supported, 2 partial, 4 unsupported across 15 clients

The :hover pseudo-class applies styles when the user points at an element. It only works in clients that render <style> blocks, since inline styles cannot express pseudo-classes. Outlook on Windows ignores :hover entirely; most webmail clients honor it, with mobile clients being a no-op (no hover surface).

Client Support

ClientCategoryEngineSupport
GmailwebmailGmail WebSupported
Gmail AndroidmobileGmail MobilePartial
Gmail iOSmobileGmail MobileUnsupported
Outlook 365webmailOutlook WebPartial
Outlook (New)desktopOutlook WebUnsupported
Outlook ClassicdesktopMicrosoft WordUnsupported
Outlook iOSmobileOutlook MobileUnsupported
Outlook AndroidmobileOutlook MobileSupported
Apple MaildesktopWebKitSupported
Apple Mail iOSmobileWebKitSupported
Yahoo MailwebmailYahooSupported
Samsung MailmobileSamsungSupported
ThunderbirddesktopGeckoSupported
HEY MailwebmailWebKitSupported
SuperhumandesktopBlinkUnknown

Client-by-client behaviour for :hover

Fully supports :hover (8): Gmail, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail.

Partial support (2): Gmail Android, Outlook 365. Expect rendering quirks unique to each engine — partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

No support (4): Gmail iOS, Outlook (New), Outlook Classic, Outlook iOS. Plan fallbacks for these clients before relying on :hover in production sends.

Behaviour unverified in: Superhuman.

When to use :hover in email

  • CTA button hover state on web-mode email previews.
  • Underline-on-hover styling for inline links in newsletter content.
  • Subtle background-color shifts on interactive cards in modern email designs.

Rendering behaviour and edge cases

  • Outlook on Windows strips <style> blocks and ignores :hover.
  • Gmail Web honors :hover when <style> blocks are preserved (which depends on sanitization rules).
  • Mobile clients have no hover surface — :hover is effectively a no-op.

Recommended fallback strategy

Treat :hover purely as enhancement. The base CTA must look complete and tappable without any hover state. Inline the static appearance and use <style> blocks only for the hover overlay.

Fixes & Workarounds

Gmail iOS

Unsupported

":hover" is not supported in this email client.

Outlook (New)

Unsupported

":hover" is not supported in this email client.

Outlook Classic

Unsupported

":hover" is not supported in this email client.

Outlook iOS

Unsupported

":hover" is not supported in this email client.

Gmail Android

Partial

":hover" is not supported in this email client.

Outlook 365

Partial

":hover" is not supported in this email client.

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free

Support data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.