freeCodeCamp/guide/english/css/hover-selector/index.md

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.

You can also use the hover selector on an element to affect another element.

button {
  color: white;
  background-color: green;
}

button:hover span{
  color: green;
}

In the example above, when a user moves their mouse over the button element, the span element's color would change to green.

More Information:

MDN :hover Docs

You can find many more pseudo-classes in this article on Mozillia's MDN Pseudo-classes Docs.