1.5 KiB
| title |
|---|
| Hover Selector |
Hover Selector
The CSS :hover selector is one of many pseudo-classes that are used to style elements.
The :hover selector is used to select elements when you mouse over them.
The :hover selector can be used on all elements, not only on links.
Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
CSS Syntax :hover { css declarations; }
The hover selector only applies the styles provided in the rule when the element enters the hover state. That is when the user hovers over the element with their mouse.
button {
color: white;
background-color: green;
}
button:hover {
background-color: white;
border: 2px solid green;
color: green;
}
In the example above, the button's normal styling is white text on a green button.
When a user hovers over the button with their mouse the rule with the :hover selector will become active and the button's style will change.
More Information:
You can find many more pseudo-classes in this article on Mozillia's MDN Pseudo-classes Docs.