Summary  
This chapter demonstrates using the CSS :hover pseudo-class to alter element styles—such as colors, shadows, and transitions—when the user’s cursor moves over them, creating interactive hover effects.

General domain of usage  
Web user interfaces (UI design)

Web elements can respond to user interaction. One of the most common interactions is hovering the mouse over an element.

In CSS, this is handled using the `:hover` pseudo-class.

## What Is `:hover`?

The `:hover` pseudo-class applies styles when the user places the mouse pointer over an element.

Basic syntax:
```css
selector:hover {
  property: value;
}
```
Example:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5LWJ1dHRvbiI+Q2xpY2sgTWU8L2J1dHRvbj4KICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJzdHlsZWQtbGluayI+TGVhcm4gTW9yZTwvYT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

When the user hovers over the button, the background color changes. When the cursor is over the link, the link becomes underlined.

`:hover` works on most HTML elements. It only activates when the pointer is over the element.

Note

## Why Hover Effects Matter

Hover effects improve the user experience, provide visual feedback, and make interfaces feel more interactive.

They are commonly used for links (`<a>`) and buttons, as well as navigation menus.

Style web pages using CSS to control layout, spacing, colors, and typography. Work with selectors, the box model, and Flexbox to build structured layouts. Create modern UI components using backgrounds, fonts, and visual effects.

Adding Hover Effects

What Is :hover?

Why Hover Effects Matter

What Is `:hover`?