How to Use CSS :hover

The :hover CSS pseudo-class is used to select and style an element when the user hovers over it with their mouse. Here are some examples of how to use it:

1. Change the background color of an element on hover:

.element:hover {
  background-color: yellow;
}

2. Change the font color of an element on hover:

.element:hover {
  color: red;
}

3. Change the font size of an element on hover:

.element:hover {
  font-size: 20px;
}

4. Change the opacity of an element on hover:

.element:hover {
  opacity: 0.5;
}

5. Add a border to an element on hover:

.element:hover {
  border: 1px solid black;
}