The Hover Pseudo-class is activated when the system pointing device
(if any exists) is within the bounds of the current element rendering
box, but has not been activated (via mouse click, etc.) The Hover
Pseudo-class is one of several that are activated based on events that occur
over time or as initiated by the user.
Example
Ext/Doc: a.test:hover
{ color: red }
In-Line: NA
Notes
Careful attention must be paid to cascading order when using Pseudo-classes.
For example, the Hover pseudo-class style rule must occur after any Link and
Visited pseudo-class rules in order to prevent the pseudo-classes from blocking
visibility of each other.
CSS2 notes that browsers do not need to support this pseudo-class, and with
some browsers or systems implementing this system may be impractical or impossible.
Browser Peculiarities
Internet Explorer
4.0+:
- This Pseudo-class currently only applies to hyperlinks.
Netscape
6.x:
- This behaves as you would expect it to with hyperlinks.
- This pseudo-class also applies to form elements such as the INPUT
types, SELECT and TEXTAREA.
- Although this can be applied to TEXTAREA and INPUT TYPE=
PASSWORD/TEXT fields, it behaves oddly. The "hover" state only
exists when the mouse is right on the rendered boundary of the
element. When the pointer is inside the magic region, the hover
state is considered "off."
- Although it CAN be said that this pseudo-class applies to
block-level elements, it produces odd behaviors: the "hover" state
only exists when the pointer is in the non-text portions of the element
(such as blank regions off to the right of the content.) For
TABLE, the "hot" region is just at the edge boundary of the
table box, and cell "hot" regions are also in the non-text portions
of the element.
- It does not apply to inline elements (eg: SPAN, B, IMG)
Opera
4.0+:
- This Pseudo-class currently only applies to hyperlinks.