|

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;
}
Try Me!
  1. Change the font color of an element on hover:
.element:hover {
  color: red;
}
Try Me!
  1. Change the font size of an element on hover:
.element:hover {
  font-size: 20px;
}
Try Me!
  1. Change the opacity of an element on hover:
.element:hover {
  opacity: 0.5;
}
Try Me!
  1. Add a border to an element on hover:
.element:hover {
  border: 1px solid black;
}
Try Me!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *