44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
|
---
|
||
|
|
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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
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:
|
||
|
|
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes' target='_blank' rel='nofollow'>MDN `:hover` Docs</a>
|
||
|
|
|
||
|
|
You can find many more pseudo-classes in this article on Mozillia's <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes' target='_blank' rel='nofollow'>MDN Pseudo-classes Docs</a>.
|