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: