Hover Trigger

CSS Hover Trigger Summary

A hover trigger lets hovering over one element change something inside it. This is often used for menus, cards, buttons, and hidden links.

.card:hover a {
	display: inline-block;
}

Parent Hover

A parent element can respond to hover, and CSS can then style an element inside that parent.

This means the user does not need to hover directly over the inner element. They can hover over the whole box.

.card:hover a {
	color: blue;
}

The Greater Than Symbol

The > symbol means the second element must be directly inside the first element. This is called a child selector.

.card:hover > a {
	display: inline-block;
}

Without the > symbol, CSS can find matching elements deeper inside the parent. With the > symbol, CSS only looks for direct children.

Showing Hidden Content

A common use is hiding a link or detail until the user hovers over the whole card.

.card a {
	display: none;
}

.card:hover > a {
	display: inline-block;
}

Why This Is Useful

This lets a larger area trigger a smaller visual change. It can make a design feel easier to use because the user can hover over the whole box instead of a tiny link or icon.