CSS Hover Trigger Summary

A hover trigger styles one element when the user hovers over another element that contains it.

This pattern is useful when a whole card or menu item should control a smaller part inside it.

.card .details {
	opacity: 0;
}

.card:hover .details {
	opacity: 1;
}

When the card is hovered, the details inside that card become visible.

The Selector Has Two Parts

The first part is the element being hovered. The second part is the element being styled.

.menu-item:hover .submenu {
	display: block;
}

This means: when .menu-item is hovered, style the .submenu inside it.

Keep Hover Triggers Accessible

Hover triggers can be hard to use on touch screens and with keyboards. Important content should also be reachable with focus, clicks, or normal page content.

The Focus lesson explains keyboard-focused states.

Hover Trigger