CSS :hover pseudo-class
 Complete CSS Reference
Example
Specify the color of links:
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */ |
Try it yourself »
More examples at the bottom of this page.
|
Definition and Usage
The :hover pseudo-class adds a special style to an element when you mouse over it.
Active, visited, unvisited, or when you mouse over a link, can
all be displayed in different ways.
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!
Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!
Pseudo-classes can be also be combined with CSS classes, like
this:
a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a> |
If the link in the example above has been visited, it will be displayed in red.
Browser Support
The :hover pseudo-class is supported in all major browsers.
 |
Try it Yourself - Examples |
Hyperlink 2
This example demonstrates how to add other styles to hyperlinks.
Related Pages
CSS tutorial: CSS Pseudo classes
Complete CSS Reference
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
