CSS :hover Selector
Complete CSS Selector Reference
Example
Select the style when the mouse is over a link:
Definition and Usage
The :hover pseudo-class is used to add special styles when the mouse pointer hovers over a link.
Tip: The :hover selector can be used on all elements, not just links.
Tip: The :link selector sets the style for unvisited page links, the :visited selector sets the style for visited page links, and the :active selector sets the style when you click on a link.
Note: To achieve the expected effect, in the CSS definition, :hover must come after :link and :visited!
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Note: In IE, you must declare <!DOCTYPE> to ensure that the :hover selector works properly.
Related Pages
CSS Tutorial: CSS Links
CSS Tutorial: CSS Pseudo-classes
Try it Yourself - Examples
Example
Active, visited, unvisited, or a link with a mouse hover:
Example
Different styles for link styles: