CODEWITHSUNDEEP
htmlcss
t_strudel
t_strudel

Reputation: 41

Navigation links text color 1 color at a time

I have 5 navigation links. I want them to always remain a black text color. When a user clicks on a link, I want it to become a different color. When they go to another link, I want the previous link to become black again, but the current one to change again. Basically, 4 links will always be black, but the current one is different, but I need the previous link to change to black. Right now after a user visits all of my links, they will all become a different color, and black is not seen again until cookies are erased. An example is here- https://www.apple.com . Apple's navigation links are all white, but when you visit a link, it changes to a grey, then when you go to another link, the link you were just on changes back to white and your current link is grey. Thank you for those that help. Below is my HTML & CSS:

<nav>
<a href="index.html">Home</a> &nbsp;
<a href="about.html">About</a> &nbsp;
<a href="services.html">Services</a> &nbsp;
<a href="sales.html">For Sale</a> &nbsp;
<a href="contact.html">Contact</a> &nbsp;
</nav>

nav a { text-decoration: none; }

nav a:link { color: #000000; }

nav a:visited { color: #333333; }

nav a:hover { color: #333333; }

Upvotes: 0

Views: 77

Answers (2)

ddonche
ddonche

Reputation: 1065

What I thought at first glance is that you were looking for the active link. That is, the link that is currently being utilized will be the different color. Simple add this to your css and make it whatever color you need. 

/* selected link */
nav a:active {
    color: blue;
}

What that does, however, is only change the link while it's being clicked. In order to do what you need is a little more complicated. This has been covered here.

Essentially you have to set up an active class in your css that you can call in your html from the current page. 

.navigation a.active {
      color: #333;
}

And your html:

<div class="navigation" id="navigation">
    <a href="#" class="active">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

Upvotes: 1

Triforcey
Triforcey

Reputation: 451

Change the a:visited attribute to: {color: #000000}.

Upvotes: 1

Related Questions