Controlling link colors on hover

[jockm]

Good day,

I have a blue left side vertical navbar on my site at

http://www.kalikalos.org/navbar.htm.

I have various links down the side there that are all in white text with textdecoration : none. All well and good.

The last link there ("facilitators only&quot, however, is called from a javascript function, gateKeeper(), which allows that link to be password protected.

I want all these links, including this last one to change text colour when the mouse passes over them. This is built into the ID="whyte", associated with the entire list of links. Here is a code fragment of my navbar:


<DIV ID=&quot;whyte&quot;>
<br><b><a href=&quot;accomodation.html&quot; target=&quot;main&quot;>Accommodation</a></b>
<br><a href=&quot;javascript:gateKeeper()&quot; onMouseover=&quot;window.status='Remember your password is required!'; return true; &quot; onMouseOut=&quot;window.status=''; return true;&quot;><B>(Facilitators
only)</B></a>
</DIV>

The code for ID=&quot;whyte&quot; is found in styles.css and is

#whyte A:link, #whyte A:visited, #whyte A:active {color:#FFFFFF;text-decoration:none}
#whyte A:hover {color:#FFFF33}

The code for gateKeeper() is found in scripts.js and is

function gateKeeper()
{
var password = prompt(&quot;Enter password or request it.&quot;, &quot;Request_password&quot


if (password == null)
{
// return false;
}
else
{

window.close(self)
var loc=password + &quot;.html&quot;;
top.main.location.replace(loc);
}
}

The text changes color on hover for all the links except the last one called by gateKeeper().

What do I need to do to:
a) make this last link a different color than white (say lite green), and
b) make it change color to yellow like the rest do when the mouse hovers over it.

thanks

 

[gelgaard]

I use classes to define my anchor links as per the following example lifted from our general style sheet:

a.menu:link {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; font-size: 7pt; color: #dddddd; text-decoration: none;}
a.menu:visited {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; font-size: 7pt; color: #dddddd; text-decoration: none;}
a.menu:hover {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; font-size: 7pt; color: #ffccaa; text-decoration: none;}
a:link {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; color: #333399;}
a:visited {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; color: #333399;}
a:hover {font-family: &quot;Verdana&quot;, &quot;Arial&quot;; color: #993333; }

My objective was to control the type size of different links but the basic structure of defining different styles of links seems to allow for unlimited fine tuning regardless of whether it is a normal link or a javascript call.

 

[jockm]

Hi Gelgaard

thanks for taking time to indicate how you have been using classes to do something similar.

I definted CLASS=&quot;menu&quot; as you did above, but when I applied it to my <DIV> tag, nothing happened. I couldnt even get it to eliminate the underlining.

So I went back to my ID=&quot;whyte&quot;, which at least knocks off the underlining, and causes all but the Javascript link to change color on hover. I can't get the Javascript link to change color on hover, try as I may, experimenting with <SPAN> and some ID's in the <SPAN> tag.

I have kinda given up for the moment. Ordered a book called Core CSS by Schengili-Roberts and hope I can figure out a solution from that.

jock

 

[RISTMO]

You need to put the <b> tag outside of the <a> tag.

Rick