Almost everyone who is interested in webdesign and has basic knowledge of it, knows :hover
, less people know that this CSS pseudo-class can be applied to multiple elements and that therefore, you shouldn't use a:hover
. Why? Think of this:
<h3><a name="blah" id="blah">TITLE</a></h3>
Now combine that with a browser, which has very good CSS support, like Mozilla (or Opera, what you like). If you hover over this h3
element, you will notice that the color changes if the author of the document has sloppy CSS like this:
a:hover{ color:red; background:transparent; /* although it is not a rule, you should always specify both 'color' and 'background' properties */ }
Internet Explorer does not show this behavior, since Internet Explorer doesn't support :hover
for a
elements, which haven't got href
specified.
Basically there are two solutions to this problem. Probably the best is using a:link:hover
and a:visited:hover
. The other solution is don't use out of date HTML and use the id
attribute correct:
<h3 id="blah">TITLE</h3>
Of course you can claim that you are doing this for backwards compatibility and so you can't use this method. Well, then you will have to use the CSS method, which is recommended anyway, since sooner or later, we won't have a
elements anymore. And please don't choose the illegal third option (<a name="blah" id="blah"></a>
).
If you want to know everything about these little interesting issues. And you should, since you are a webdesigner/developer, read the following pieces of text:
id
(post from Joe Clark)
Just to confirm that yes, I'm the same person that wrote the article and contributed to Simon's work.
The a
element will be with us for a very long time. Consider the number of people who actually use proper XHTML. Then consider the subset of those people who will use XHTML 2.0. That's less than a dozen people at the moment (I would speculate).
It will be with us for at least 20 years, if it disappears at all. Remember: XHTML 2.0 is not supposed to replace XHTML or HTML.
Suggesting people shouldn't use a:hover
is pretty farfetched since the document language determines which elements are hyperlink source anchors though if you mean that should be used with care then fair enough since it covers all anchors.
Then again you always have the option of Attribute Selectors, for example: a[href]
in conforming user-agents.
I suggest people use a:link:hover
and a:visited:hover
if there document contains out of date use of the a
element.
Then again, correct use for styling the a
element should be promoted. You will have to learn it sometime, since I think there is no other way of detecting a link (through a CSS selector) within a XML application.
Anne: And please don't choose the illegal third option (). What's so illegal about it?
Well, you are reffering to the title. IMHO it is just weird to write down:
<h3><a name="blah" id="blah"></a>TITLE</h3>
More specifically: "It just looks like tag soup". Besides that, it is more difficult to convert, when you are updating your old archives to let's say, XHTML1.0 Strict.
To correct myself: name
is valid XHTML. Though it is still tag-soup IMHO to use it like the example in the previous comment.
To be even more precise, name
is valid XHTML 1.0, but not valid XHTML 1.1