CSS Hover Summary

The :hover pseudo-class applies styles when a pointer is over an element.

a:hover {
	color: red;
}

Hover styles are often used to show that links, buttons, cards, and menu items are interactive.

Hover Changes A State

A hover rule has a selector, a colon, and the word hover. The styles apply only while the pointer is over the matching element.

.button {
	background: blue;
	color: white;
}

.button:hover {
	background: navy;
}

The button starts blue, then becomes navy while hovered.

Do not hide essential information so it can only be found on hover. Touch screens and keyboard users may not experience hover in the same way.

Use hover to add feedback, not to make the page impossible to use without a mouse.

A parent hover state can style something inside that parent, such as showing a menu or changing text inside a card.

The Hover Trigger lesson explains that pattern.