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