Hover

CSS Hover Summary

Hover styles are CSS styles that appear when a user moves their mouse over an element. Hover is most commonly used on links, buttons, cards, and menu items.

a:hover {
	color: red;
}

Hovering Links

Links often change when someone hovers over them. This helps the user understand that the text can be clicked.

a:hover {
	color: red;
}

This changes the link color only while the mouse is over the link.

Changing Some Styles But Not Others

A hover style only changes the CSS properties you write. If you only change the color, the size, spacing, border, and background stay the same.

a {
	color: blue;
	font-size: 20px;
}

a:hover {
	color: red;
}

In this example, the link turns red on hover. It does not change size because font-size is not changed in the hover rule.

Hovering Buttons

Buttons often change background color on hover. This makes the button feel more active.

button {
	background: blue;
	color: white;
}

button:hover {
	background: black;
}

The background changes, but the text stays white because the hover rule does not change the color property.

Hovering Boxes

Hover can also be used on regular boxes like divs. This is common for cards, image boxes, and navigation items.

.card {
	background: white;
	border: 1px solid black;
}

.card:hover {
	background: #eeeeee;
}

This makes the card background change when the mouse is over the card.

Hovering Borders

Hover can change a border. This is useful when you want something to look selected without changing the whole design.

.box {
	border: 2px solid gray;
}

.box:hover {
	border-color: blue;
}

The border color changes, but the border width stays the same because only border-color was changed.

Hover Should Be Simple

Hover is usually best when it changes one or two things. A small color change, background change, border change, or underline is usually enough.

Hover should help the user understand what they can click or interact with.