CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS :hover Selector
Complete CSS Selector Reference
Example
Select and style a link when you mouse over it:
a:hover
{
background-color:yellow;
}
{
background-color:yellow;
}
Try it yourself »
Definition and Usage
The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.
Tip: 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!
Browser Support
The :hover selector is supported in all major browsers.
Note: In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.
Related Pages
CSS tutorial: CSS Links
CSS tutorial: CSS Pseudo classes
Try it Yourself - Examples
Example
Select and style unvisited, visited, hover, and active links:
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
Try it yourself »
Example
Style links with different styles:
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex2:hover,a.ex2:active {font-size:150%;}
Try it yourself »
Complete CSS Selector Reference
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
