Events

CSS Events Summary

CSS event states let styles change when a user points at, focuses, or interacts with an element.

CSS does not handle events the same way JavaScript does. Instead, CSS uses pseudo-classes such as :hover and :focus to style an element in a particular state.

button:hover {
	background: navy;
}

Hover Styles Respond To Pointing

:hover applies when a pointer is over an element. It is common for links, buttons, cards, and menus.

The Hover lesson explains how hover styles work and why they should not be the only way to use a feature.

Focus Styles Respond To Keyboard Navigation

:focus applies when an element is selected for keyboard input or keyboard navigation.

a:focus {
	outline: 2px solid blue;
}

The Focus lesson explains why visible focus styles are important for accessibility.

Transitions Smooth The Change

A state change can happen instantly or animate smoothly with a transition.

button {
	transition: background 200ms ease;
}

button:hover {
	background: navy;
}

The Transition lesson explains this timing behavior.