:hover Pseudo-Class

CSS :hover Pseudo-Class

The CSS :hover pseudo-class selects an element while a user points to it, usually by placing a mouse pointer over the element. It is commonly used to provide visual feedback for links, buttons, and other interactive elements.

The :hover Pseudo-Class

The :hover pseudo-class is added directly to a selector with no space between the selector and the colon.

a:hover {
  color: red;
}

In this example, the rule matches an <a> element while the user points to it. When the pointer moves away, the link returns to the styles that normally apply to it.

Using :hover with Links

Links are one of the most common uses for :hover. Changing the appearance of a link while it is being pointed to gives the user additional visual feedback that the text is interactive.

a {
  color: #0088cc;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

<a href="/contact.html">Contact Us</a>

The first rule defines the normal appearance of the link. The second rule applies while the user points to the link.

The Browser Result shows the link itself. On a page using the CSS rule above, its hover styling appears when the pointer is placed over the link.

Using :hover with Buttons

The :hover pseudo-class can also provide visual feedback when a user points to a button.

button {
  padding: 8px 16px;
  color: white;
  background-color: #0088cc;
  border: 0;
}

button:hover {
  background-color: #006699;
}

<button type="button">Learn More</button>

The button normally uses one background color and changes to another while it is being hovered.

Using :hover with Other Elements

The :hover pseudo-class is not limited to links and buttons. It can match many HTML elements while the user points to them.

.card:hover {
  background-color: #f5f5f5;
}

<div class="card">
  <h3>HTML Tutorials</h3>
  <p>Learn how to create web pages with HTML.</p>
</div>

In this example, the background of the entire element with the card class changes while the pointer is over it.

Changing Multiple Properties

A :hover rule can change more than one CSS property at the same time, just like any other CSS rule.

.notice:hover {
  color: #000000;
  background-color: #f5f5f5;
  border-color: #0088cc;
}

The hover state can change text color, background color, borders, and other presentation properties. The changes should remain clear and should not make the content difficult to read.

Styling Descendants on Hover

The :hover pseudo-class can be combined with other selectors so that hovering one element changes the styling of an element inside it.

.card:hover h3 {
  color: #0088cc;
}

<div class="card">
  <h3>HTML Tutorials</h3>
  <p>Learn the basics of HTML.</p>
</div>

The selector .card:hover h3 selects the <h3> descendant while the element with the card class is being hovered.

Hover and Touch Devices

Hover behavior is most closely associated with devices that use a mouse or another pointing device. Touchscreens may handle hover differently, may simulate it, or may not provide a persistent hover state at all.

For this reason, a page should not require hovering to reveal information or controls that are necessary for using the page. Hover is best used as additional visual feedback rather than the only way to access important content or functionality.

Hover and Accessibility

Hover styles can improve visual feedback, but keyboard users do not normally trigger :hover simply by moving focus through a page. Interactive elements should also provide an appropriate visible focus state.

a:hover {
  color: red;
}

a:focus {
  outline: 2px solid #0088cc;
}

Using hover and focus styles together helps provide feedback for different ways of interacting with a page. The next tutorials cover :focus and :focus-visible in more detail.

When to Use :hover

Use :hover when an element should provide additional visual feedback while a user points to it. Common uses include changing link colors, button backgrounds, borders, underlines, or the appearance of other interactive page elements.

Do not depend on hover alone for essential instructions, navigation, or functionality. The page should remain understandable and usable when a device or input method does not provide a traditional hover state.

Summary

The CSS :hover pseudo-class selects an element while a user points to it. It is commonly used with links and buttons, but it can also be applied to many other HTML elements and combined with other selectors.

Hover styles are useful for visual feedback, but important content and functionality should not depend on hovering. The next tutorial covers the :focus pseudo-class and how CSS can style an element while it has focus.