A:hover and named anchors

If you hover over or next to the above heading "A:hover and named anchors" in Mozilla, Netscape 6+, or Opera 7 you will notice that it is subject to the same hover effects as the link below. (The A element is made block-level in this example to make the effect more apparent in Netscape.)

This is a link to the heading "A:hover and named anchors"

a {display: block}
a:link, a:visited {text-decoration: none; color: blue}
a:hover {text-decoration: underline; color: red; background: yellow}

<h1><a name="target">A:hover and named anchors</a></h1>

If you use "named anchors" and would like to prevent unwanted effects in browsers that support the :hover pseudo-class on objects other than just links, you have a few options but only one true solution.

This test was performed on Windows operating system with Mozilla 1, Netscape 6.2, Internet Explorer 5.5 & 6, Opera 5.12, 6.03, & 7.01 and Netscape Navigator 4.61/4.79; results do not necessarily include previous browser versions or other operating systems.

Possible Solution: Combine pseudo-classes

Creating a combined pseudo-class selector for the hover effect solves the issue and works in IE5&6, M1, N6+, and O7. However, Opera 5&6 do not support combining pseudo-classes. In fact, Opera 5&6 treat the selectors as simply "a:link, a:visited" which can create additional problems.

a:link:hover, a:visited:hover {text-decoration: underline; color: red; background: yellow}

See this solution in action -->

Possible Solution: ID targeted element

Instead of using a named anchor, simply ID the targeted element. When used inline, you could wrap a SPAN around the target and ID the SPAN tag. The downside for this option is that older browsers, such as Netscape 4, do not support the id attribute. Therefore the targeted links will not work in older browsers.

This is a link to the above heading "Possible Solution: ID targeted element" This is a link to the targeted inline element SPAN in the paragraph above.

<h1 id="element">Possible Solution: ID targeted element</h1>
<span id="inline">ID the SPAN tag</span>

Possible Solution: Attribute selector [href]

You could make hover declarations using the attribute selector a[href]:hover. This works in M, N6+, and O5+, but IE5&6 do not support attribute selectors. Therefore IE5&6 users would not see a hover effect.

a[href]:hover {text-decoration: underline; color: red; background: yellow}

See this solution in action -->

Recommended Solution: Attribute selector [name]

Counter-declare any declarations made for the hover with the attribute selector a[name]:hover. This solution is recommended for compatibility with all browsers. The hover effect is rendered on links in all browsers that support the :hover pseudo-class, but is not rendered on named anchors in newer browsers.

a:hover {text-decoration: underline; color: red; background: yellow}
a[name]:hover {text-decoration: inherit; color: inherit; background: inherit}

See this solution in action -->

Related links

"Notes on suggesting link styles"
http://www.people.fas.harvard.edu/~dbaron/css/1999/09/links

"A revised method of defining link pseudo-classes"
http://www.evolt.org/article/view/17/35541/index.html

Acknowledgements

Tim Rivera would like to thank the following people for their suggestions: Kristof Neirynck, Rijk van Geijtenbeek, Ric

Test date: June 20, 2002
Modified: June 25, 2002
Modified: March 3, 2003