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
The Altova MissionKit, recent winner of the Jolt Product Excellence and Productivity Award for Best Development Environment,
is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy®, MapForce®, and StyleVision® plus 3 additional tools for less than the price of 2.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
| 
