CSS Attributes Index Pseudo-class Attributes
Sets the style of the anchor when the user's mouse hovers over the links.
CSS |
[ A ] :hover { attribute1:parameter1 [ ; attribute2:parameter2 [ ; . . . ] ] } |
Script |
N/A |
attribute |
Any attribute applicable to text. |
parameter |
Any of the range of values available to the corresponding attribute. |
The default value is browser-specific.
Hover means that the user has the mouse positioned over the link and has hesitated. The style will not change if the mouse is simply passed over the link. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, link, and visited.
Using pseudo-classes on objects other than the A object has no effect.
The following demonstrates use of the a:hover attribute in an embedded stylesheet to set the color of hyperlinks on a page when the mouse pointer moves over the links.
<style type="text/css">
a:link {
font-weight: bold; color: #8be }
a:visited {
color: #eb8 }
a:active {
background-color: #eec; color: #500 }
a:hover {
color: #bc7; text-decoration: none;
font-variant: small-caps }
-->
</style>
This feature requires Microsoft® Internet Explorer® 4.0 or later.
Show me
Note the syntax in the example above uses only a colon ( : ) to specify the hover pseudo-class. If the hover property is to apply only to default anchor elements, the A before :hover is optional.
The CSS :hover attribute can also be used for contextual hyperlinks, or links which are contained within other selectors. For instance:
dt a:hover {
font: bold small-caps; background: sienna; color: khaki }
.showme a:hover {
background: maroon; color: yellow;
text-transform: uppercase }
That declaration will apply the style to all links within a definition term ( DT ) element, as well as to elements whose class attribute is set to showme. And in case you have not noticed, those :hover styles are actually what are used throughout this site.
A
active, link, visited