Useful CSS tips:Links
From MDC
[edit] Anchor Pseudo Classes
CSS allows to style anchors through four pseudo-classes:
-
:linkfor unvisited links -
:visitedfor visited links -
:hoverwhen user hovers -
:activefor active links
Because of the cascading nature of CSS styles, it is important to declare pseudo-classes styles in the above order: hover must be placed after link and visited, else its style will be overridden. Moreover, since active is declared after hover, when a link is both hover and active, the last one is the applied style.
[edit] Hover where there is no text
Normally hover pseudo class style is triggered when mouse pointer hovers anchor text. Sometimes, when link is placed in a table cell or in a menu bar, either vertical or horizontal, it is necessary to trigger the hover style when mouse pointer hovers the table cell where there is no text.
A workaround to have this behaviour is to make the anchor a block with a certain width.
<a style="display: block; width: 150px;" href="#">My link</a>