a:hover - how many can I have?

Am I limited to having only one a:hover per page?

[DiAMOndDavE]

Folks,

Is there a limit to how many times you can ascribe functionality to a:hover on an HTML page? I want to have 2 types of links with 2 different rollover characteristics on a page. Say I want one to be yellow when I rollover one and red when I rollover another? Is this possible. Dreamweaver (version 3) tells me I have already chosen an attribute for the a:hover and bars me. Any ideas/workarounds??

Regards
DiAMOndDavE

[msr986]

You can have as many as you need.

Just define different classes for your links and define the hover like this:

a.class1:hover{color:#000}
a.class2:hover{color:#fff}

The links should look like:

<a href="#" class="class1">
<a href="#" class="class2">

Welcome to WebmasterWorld!

[rewboss]

The possibilities are endless, actually. Class is the obvious solution (it's not a "workaround", this is how CSS is supposed to operate, despite what DW might tell you). Another elegant solution is the use of contextual selectors.

A fairly common situation is where you have most text links behaving in one fashion, but the links in a navbar (which might be on a different background) doing something different. You can put all your navbar links in a <div> with an id "navbar", then your style sheet will look a little like this:

/* First the styles for the "normal" links */
a:link { .... }
a:visited { .... } /* etc etc etc */

/* Now the styles for the navbar links */
#navbar a:link { .... }
#navbar a:visited { .... } /* etc etc etc */

Note: no comma after #navbar.

#navbar a is interpreted as: "Any a element that is nested inside a div element with an id of 'navbar'."

This allows you to drop the class attribute from the <a> tag:

<div id="content">
<a href="next.html">This will be a normal text link</a>
</div>

<div id="navbar">
<a href="next.html">This will be a navbar link</a>
</div>

[Nick_W]

Yes, I find rewboss's method much tidier and easier to understand when you go back to something weeks/months later...

Part of writing good css is the making it understandable and easy to edit aswell as what it actually does

Nick

[gsx]

Isn't an 'Id' only supposed to be used once per document?

[rewboss]

Well, yes. The idea is that you have one div with all the navigation links in it:

<div id="navbar">
<a href="index.html">Home</a>
<a href="sales.html">Sales</a>
<a href="contact.html">Contact</a>
</div>

If you have more than one div with "navbar" style links, then you'll have to use classes.

[Filipe]

Mmhmm. Once per document, as was noted, but here's why:

In newer XHTML standards (A combination of XML and HTML), "ID" is used instead of "NAME" as the naming convention for tag elements. So, just as you wouldn't use duplicate names for form elements (I know there are exceptions to this), you wouldn't use duplicate ID's either.

As far as CSS is concerned, it's a way of creating a 1:1 relationship between certain style elements and a specific entity on a page. If you're planning to use it on more than one entity, you might as well just use classes because that's what they mean:

#id = Referring to a specific identity of an entity (like saying "Bob has brown hair")
.class = Referring to a certain class of entity (like saying "Brunettes have dark hair")

[DiAMOndDavE]

Thanks msr986 and rewboss. I will go away and have a play. As you can see I am relatively new to CSS.
Best regards
DiAMOndDavE