Welcome to WebmasterWorld Guest from 54.234.153.186

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

a:hover - how many can I have?

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

     

DiAMOndDavE

4:01 am on Aug 15, 2002 (gmt 0)

10+ Year Member



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

4:13 am on Aug 15, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:30 am on Aug 15, 2002 (gmt 0)

10+ Year Member



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

8:56 am on Aug 15, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

10:13 am on Aug 15, 2002 (gmt 0)

10+ Year Member



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

rewboss

12:52 pm on Aug 15, 2002 (gmt 0)

10+ Year Member



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

10:07 pm on Aug 15, 2002 (gmt 0)

10+ Year Member



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

12:09 am on Aug 16, 2002 (gmt 0)

10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month