To create a hover effect in CSS, you use the “:hover” pseudo-class. This pseudo-class is used to select elements when you mouse over them.
Here’s a basic example:
```
.button {
background-color: blue;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: red;
}
```
In this CSS code, the `button` class is initially set to have a blue background color. When you hover over an element with this class, the `:hover` pseudo-class changes the background color to red.
It’s important to know that the `:hover` pseudo-class can be used on any CSS selector, not just classes. You can apply it to IDs, HTML elements, and even complex CSS selectors.
Remember the stylings will only apply while the mouse cursor is over the selected element. When you move the mouse cursor away, it will return to its normal state.
