Introduction

You cannot write a:hover in inline CSS. The style attribute only accepts CSS property declarations. It does not support selectors, pseudo-classes, or pseudo-elements. To get hover behavior, use a <style> block, an external stylesheet, or a JavaScript event handler as a fallback in environments where stylesheets are unavailable.

Why Inline Styles Cannot Express :hover

The HTML style attribute accepts a sequence of CSS declarations (property-value pairs). It does not accept rules, which require a selector. :hover is a pseudo-class selector, so it belongs in a stylesheet context, not inside an attribute.

This is valid inline CSS:

<a href="/about" style="color: blue; text-decoration: none;">About</a>

This is invalid and will be ignored by every browser:

<!-- WRONG: browsers ignore this entirely -->
<a href="/about" style="a:hover { color: red; }">About</a>

The browser does not throw a visible error. It silently discards the invalid syntax, which makes debugging confusing if you do not know the rule.

The Correct Solution: Use a Style Block or Stylesheet

The standard way to add :hover behavior is through CSS rules in a <style> element or an external stylesheet.

Inline style block (scoped to the page)

1<style>
2  .link-primary:hover {
3    color: crimson;
4    text-decoration: underline;
5  }
6</style>
7
8<a href="/about" class="link-primary">About</a>

External stylesheet

1/* styles.css */
2.link-primary:hover {
3  color: crimson;
4  text-decoration: underline;
5}

<link rel="stylesheet" href="styles.css">
<a href="/about" class="link-primary">About</a>

Targeting a single element

If you want hover on exactly one link, use an id selector:

1<style>
2  #special-link:hover {
3    color: green;
4    font-weight: bold;
5  }
6</style>
7
8<a href="/special" id="special-link">Special Link</a>

JavaScript Fallback for Inline-Only Environments

Some environments restrict you to inline attributes only. Email HTML templates, certain CMS widgets, and embedded HTML editors sometimes prohibit <style> blocks. In these cases, JavaScript event handlers provide a workaround.

1<a href="/about"
2   style="color: black; text-decoration: none; transition: color 0.2s;"
3   onmouseover="this.style.color='red'; this.style.textDecoration='underline'"
4   onmouseout="this.style.color='black'; this.style.textDecoration='none'">
5  Hover over me
6</a>

This approach works but has significant downsides:

Modern CSS Alternatives to Inline Hover

If you are working in a framework where inline styles are common (React, Vue), consider these approaches instead of raw onmouseover handlers.

CSS Modules (React)

1/* Button.module.css */
2.link {
3  color: black;
4  text-decoration: none;
5}
6
7.link:hover {
8  color: crimson;
9  text-decoration: underline;
10}

1import styles from './Button.module.css';
2
3function Button() {
4  return <a href="/about" className={styles.link}>About</a>;
5}

Tailwind CSS utility classes

<a href="/about" class="text-black no-underline hover:text-red-600 hover:underline">
  About
</a>

Tailwind's hover: prefix compiles to a real CSS :hover rule under the hood, so it has all the benefits of native CSS hover.

CSS-in-JS (styled-components)

1import styled from 'styled-components';
2
3const StyledLink = styled.a`
4  color: black;
5  text-decoration: none;
6
7  &:hover {
8    color: crimson;
9    text-decoration: underline;
10  }
11`;
12
13function Nav() {
14  return <StyledLink href="/about">About</StyledLink>;
15}

React inline style with state

If you genuinely need hover behavior without any CSS file, React state is the cleanest JavaScript approach:

1import { useState } from 'react';
2
3function HoverLink({ href, children }) {
4  const [hovered, setHovered] = useState(false);
5
6  return (
7    <a
8      href={href}
9      style={{
10        color: hovered ? 'crimson' : 'black',
11        textDecoration: hovered ? 'underline' : 'none',
12        transition: 'color 0.2s',
13      }}
14      onMouseEnter={() => setHovered(true)}
15      onMouseLeave={() => setHovered(false)}
16    >
17      {children}
18    </a>
19  );
20}

Email HTML: The Special Case

Email HTML is the most common reason developers ask this question. Email clients like Gmail, Outlook, and Yahoo Mail strip <style> blocks or heavily limit which CSS properties are supported. Inline styles are the only reliable way to control appearance.

Unfortunately, :hover support in email clients is inconsistent:

Given this fragmented support, the practical advice for email HTML is: do not rely on hover effects. Design the email so it works without any hover interaction. If you add hover effects, treat them as progressive enhancement that some clients will show and others will not.

1<!-- Email-safe approach: style the default state inline, add hover in <style> as enhancement -->
2<style>
3  .email-link:hover {
4    color: #cc0000 !important;
5  }
6</style>
7
8<a href="https://example.com" class="email-link" style="color: #333333; text-decoration: underline;">
9  Read more
10</a>

Clients that strip the <style> block will still render the link with the inline default styling.

Accessibility and :focus

When you add :hover styles, always pair them with :focus for keyboard accessibility. Users navigating with Tab should see the same visual feedback as mouse users.

1.link-primary:hover,
2.link-primary:focus {
3  color: crimson;
4  text-decoration: underline;
5  outline: 2px solid crimson;
6  outline-offset: 2px;
7}

On touch devices, :hover behavior is unpredictable. Some mobile browsers trigger hover on the first tap and the click on the second. Others ignore hover entirely. Never make essential functionality depend solely on hover.

Common Pitfalls

Putting selector syntax inside the style attribute. Writing style="a:hover { color: red }" is silently ignored. The browser does not warn you, so the bug can go unnoticed for a long time.

Using onmouseover without onmouseout. If you set a style on hover but never reset it, the element stays in its hovered state permanently after the first interaction.

Relying on hover for essential UI behavior. Touch devices may never trigger hover events. If a dropdown menu or tooltip only appears on hover, it is inaccessible to a significant portion of users.

Forgetting :focus alongside :hover. Keyboard users and screen reader users navigate with Tab, not a mouse. Without :focus styles, they get no visual feedback when they reach your interactive element.

Using JavaScript hover in emails. Email clients strip all JavaScript. The onmouseover and onmouseout attributes will do nothing in Gmail, Outlook, or any other email client.

Summary

• Inline CSS (style attribute) does not support pseudo-classes like :hover. It only accepts property declarations.
• The correct solution is a <style> block or external stylesheet with a class-based :hover rule.
• JavaScript onmouseover/onmouseout handlers are a fallback for environments where stylesheets are unavailable, but they are harder to maintain and less accessible.
• In modern frameworks, use CSS Modules, Tailwind's hover: prefix, or CSS-in-JS libraries instead of raw inline hover logic.
• Email HTML has limited and inconsistent :hover support. Treat hover effects in emails as progressive enhancement, not a requirement.
• Always pair :hover with :focus for keyboard accessibility.