Changing the hyperlink color on selection of hyper link

Forum Moderators: not2easy

Message Too Old, No Replies

Changing the hyperlink color on selection of hyper link

r_pat72

8:48 pm on Aug 18, 2008 (gmt 0)

Hi,

I have three text links. When user will select customer link the color of the link should turn to grey.
When user will click on employee color of the link should turn to grey and color of the customer link should turn back to #1E85BE( style of a).

Here is my code.

<a href="~/customer.aspx"> customer </a>   ¦
  
Employee   ¦   <a href="~/employee.aspx"> employee </a>
   ¦
  
Other Users   ¦   <a href="~/Users.aspx"> Users </a>

Here is my css style
a { color: #1E85BE; text-decoration: none; }
a:visited { color: #1E85BE; }
a:hover { text-decoration: underline; }

How can i change the color of the selected hyperlink to grey.

Please help.

Thanks!

Marshall

9:13 pm on Aug 18, 2008 (gmt 0)

Hi r_pat72 and welcome to WebmasterWorld.

As for the grey, you can add color to the hover. As for the selected one, you can add a:active {color: #whatever} to your css.

Marshall

r_pat72

9:22 pm on Aug 18, 2008 (gmt 0)

Hi,

I have added

a:active { color: gray; }

along with

a { color: #1E85BE; text-decoration: none; }
a:visited { color: #1E85BE; }
a:hover { text-decoration: underline; }

But still it changes the selected link color to #1E85BE;

Marshall

9:40 pm on Aug 18, 2008 (gmt 0)

Did you put it in the proper order -

a { color: #1E85BE; text-decoration: none; }
a:visited { color: #1E85BE; }
a:hover { text-decoration: underline; }
a:active { color: gray; }

Marshall

r_pat72

9:52 pm on Aug 18, 2008 (gmt 0)

yes, I have put in the same order.

here is my full code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style>
a { color: #1E85BE; text-decoration: none; }
a:visited { color: #1E85BE; }
a:hover { text-decoration: underline; }
a:active { color: gray; }
</style>
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwNzMyMTQ0ODNkZOLVaQahNQe2mRABslJlbpswG6xo" />
</div>

<div id="secNavigationalMenu" style="margin: 3px 10px 0px 20px; width: 650px; font-size: 12px;font-weight:bold; line-height: 1.2em;text-align:right;padding-right:20px;">
<a href="test.htm" id="webPlatform"> Emp </a>   ¦   customer   ¦   <a href="test.htm" id="downloadlink"> user </a>
</div>
</form>
</body>
</html>

csuguy

4:42 am on Aug 19, 2008 (gmt 0)

The problem is - active is a very short state, then it switches to visited. So - your active code is turning it gray, but it immediately then loads the visited state - which you have set to change the color to #1E85BE. If you want it to be gray after you click it - you will need to have the visited part use color:gray as well.

If you want the links to change color in respect to which one was last clicked - you'll have to use javascript or ASP or w/e to keep track of which one was clicked and then change their a:visited and a:link color's respectively.