a:hover and a:link help

liunx · Jan 9, 2008

Dr. Web was kind enough to let me copy this off his web page: 
 
<STYLE> 
A:link, A:active{ color:#0000FF; text-decoration:none; font-family: georgia; font-weight: bold; font-size: 12pt; } 
A:hover, A:visited{ color:#e01c02; text-decoration:none; font-family: georgia; font-weight: bold; font-size: 12pt; } 
</STYLE> 
 
and I've figured out pretty good how to modify this for my liking. My question is, this script, like it is, affects the whole page, how can I set this so that one cell on my page has one style of links, say no underline, and another cell the links underline while hovered? 
 
Again, I know how to adjust the script for one or the other on the whole page, but not 2 different styles on the same page.i had a similar problem earlier this summer. actually some of the scripts like this can not run parallel. the only way i know of is to have seperate frames, or iframes. via ssi doesnt work, and when added to a cgi, then added virtually, it didnt work for me. 
 
doc will likely have a loop hole to prove me wrong again! come on doc! do it! you know you want to!

chris<pixelmonkey>:monkey:Doc won't have to prove you wrong. 
 
here's a quick sample page: 
 
<html><head> 
<script> 
a.menu {color:#0000ff; style:underline;} 
a.menu:hover {color:#000000; style:none;} 
 
a.hello {color:#ff0000; style:none;} 
 
</script></head> 
<body> 
<a href=http://www.htmlforums.com/archive/index.php/"hello.html" class="hello">Hello</a> 
<a href=http://www.htmlforums.com/archive/index.php/"menu.html" class="menu">Menu Option</a> 
</body></html> 
 
ok, this isn't very practical, but that's how it's done.I'm kinda following you but I'm not great with strait html. I copied as is in a text doc and saved as an html and got an error line 4 expected ";". 
 
I'm assuming the referance is between the 2 are a.menu and class="menu" ?sorry about that. You are correct in your assumption.Ok, this is what I tried knowing what little I know: 
 
<html> 
<head> 
<SCRIPT> 
A.menu:link{ color:#999999; text-decoration:underline; font-family: georgia; font-weight: bold; font-size: 12pt; } 
A.hello:link{ color:#0000FF; text-decoration:none; font-family: georgia; font-weight: bold; font-size: 12pt; } 
</SCRIPT> 
</head> 
<body> 
<a href=http://www.htmlforums.com/archive/index.php/"hello.html" class="hello">Hello</a> 
<a href=http://www.htmlforums.com/archive/index.php/"menu.html" class="menu">Menu Option</a> 
</body> 
</html> 
 
and still get expect ";" on line 5 now??My bad. I accidently used <script> tags instead of <style> tags. Sorry about that. That'll fix your problems.as BloodGHST already mentioned, using classes in CSS will help you to do this. I also had an example page written to show you how to change colors/ text-decoration (underline) for different links. 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<html> 
<head> 
<title>Untitled</title> 
<style> 
a.swiss:link {color: red; text-decoration: none;} 
a.swiss:visited{color: red; text-decoration: none;} 
a.swiss:active{color: red; text-decoration: none;} 
a.swiss:hover {color: yellow; text-decoration: none;} 
 
a.cheese:link {color: blue; text-decoration: none;} 
a.cheese:visited{color: blue; text-decoration: none;} 
a.cheese:active{color: blue; text-decoration: none;} 
a.cheese:hover {color: #cccccc; text-decoration: none;} 
 
a.wow:link {color: black; text-decoration: underline;} 
a.wow:visited{color: black; text-decoration: underline;} 
a.wow:active{color: black; text-decoration: underline;} 
a.wow:hover{color: blue; text-decoration: underline;} 
</STYLE> 
 
 
</style> 
</head> 
 
<body> 
 
<a href=http://www.htmlforums.com/archive/index.php/"zonk.html" class="swiss">swiss</a>    
<a href=http://www.htmlforums.com/archive/index.php/"zonk.html" class="cheese">cheese</a>    
<a href=http://www.htmlforums.com/archive/index.php/"zonk.html" class="wow">w o w</A> 
 
</body> 
</html>That's got me going, Thanks for all of ya'lls help. This has been one of the best forums I've ever been on!If you are going to have the links in groups you can save a lot of work by using scoped like this (using the doctor's swiss class): 
 
<style> 
.swiss a:link {color: red; text-decoration: none;} 
.swiss a:visited{color: red; text-decoration: none;} 
.swiss a:active{color: red; text-decoration: none;} 
.swiss a:hover {color: yellow; text-decoration: none;} 
a.cheese:link {color: blue; text-decoration: none;} 
a.cheese:visited{color: blue; text-decoration: none;} 
a.cheese:active{color: blue; text-decoration: none;} 
a.cheese:hover {color: #cccccc; text-decoration: none;} 
</STYLE> 
 
 
Now it you do this: 
 
 
 
<a href=http://www.htmlforums.com/archive/index.php/"somelink">blah </a> 
<a href=http://www.htmlforums.com/archive/index.php/"anotherlink">blahblah</a> 
<a href=http://www.htmlforums.com/archive/index.php/"cheeselink" class="cheese">cheese</a> 
 
 
The first two links will be swiss but he third will be cheese The scoped format of .class tag specifies whenever this tag is inside of a container of this class appy the style. the format tag.class specifies apply the style when this tags has this class and has precidence of scoped classes. That's the cascading part of CSS.I should add one caution. Forget the cascade with the TD tag the inheritance to totally screwed up in every browser.That's cool, so I can my page into chunks without having to add "class=" into every "href" that I do.

a:hover and a:link help

liunx

Guest