Underline On Hover

Page 1 of 1

5 Replies - 9349 Views - Last Post: 08 July 2002 - 11:57 AM

#1 NCesky   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 21-February 02

Underline On Hover

Posted 07 July 2002 - 10:32 PM

http://theredux.hypermart.net

How could I make my red text menu underline the links when you hover over them? I know it has to do with javascript and shit, but my stylesheet already has links set up not to underline... cuz i want it different for the body of my page, but the menu I would like to just stay like it is, except on hover underline. Can someone explain in detail how I might accomplish that?

Is This A Good Question/Topic? 0
  • +

Replies To: Underline On Hover

#2 SoLi   User is offline

  • andydust.com

Reputation: 41
  • View blog
  • Posts: 1,438
  • Joined: 27-January 02

Re: Underline On Hover

Posted 08 July 2002 - 02:39 AM

so you only want the menu links to hover on underline?

although you may have already done all your a:link and that. you can make more anchor styles that are specificied within a class.

So for your menu you could add to your style sheet:

a.menu:hover {text-decoration: underline }

So then to your anchor tags on your menu just add class="menu" and it will choose that anchor style rather than the general one u defined for the rest of your links.

Sorry if this isn't what you meant, but at least i tried ;)
Was This Post Helpful? 0
  • +
  • -

#3


Reputation: 0

Re: Underline On Hover

Posted 08 July 2002 - 08:53 AM

that's exactly the method. Add another class to your stylesheet. One note is that stylesheets have inheritance so if you define a second class of links after your default class it will inherit all the properties you don't explicitly set. 

a:link { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #006699;  
font-weight: bold; 
font-size: 9pt;  
text-decoration: none;
}
a:visited { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #006699;  
font-weight: bold; 
font-size: 9pt;  
text-decoration: none;
}
a:hover { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #ffffff; 
background: #006699; 
text-decoration: none; 
font-weight: bold; 
font-size: 9pt;}

a.nav:link { 
font-size: 8pt;
}
a.nav:visited {
font-size: 8pt;
}
a.nav:hover { 
font-size: 8pt;
text-decoration: underline; 
}

in this example the only thing that will be different about your class='nav' links is that they will be a smaller font and the underline will be present on hover.
One other note: when building link classes you must put your selectors in the following order: link - visited - hover - active any other order yields wierd results. I never use active because it is only in effect for that micro second during the click.

H
Was This Post Helpful? 0

#4 skyhawk133   User is offline

  • Head DIC Head
  • member icon

Reputation: 1981
  • View blog
  • Posts: 20,434
  • Joined: 17-March 01

Re: Underline On Hover

Posted 08 July 2002 - 09:18 AM

hmmmm, I was looking at a stylesheet you helped me with a few weeks ago and it had
nav a:visited { }

I wonder if that works or if I totally dorked up my style sheet.
Was This Post Helpful? 0
  • +
  • -

#5


Reputation: 0

Re: Underline On Hover

Posted 08 July 2002 - 09:24 AM

it would work if you make it .nav a:visited {}

.nav a:visited is equivalent to a.nav:visited as far as I know. I have some style sheets that I have used both methods on.

H
Was This Post Helpful? 0

#6 NCesky   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 21-February 02

Re: Underline On Hover

Posted 08 July 2002 - 11:57 AM

Hey, thanks fellas, I got it working... if you wanna check it out, here goes: http://theredux.hypermart.net

Thanks again.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1