Change link color

Question

I'm an absolute greenhorn in js .. i wrote the following js: JSFiddle

*{
  margin: 0 auto;
}

.navbar {
 width: 100%;
 position: fixed;
 transition: 1s;
 color: #FFF;
}

.navbar ul li {
 display: inline-block;
 padding: 35px 30px 20px 0px;
 font-family: sans-serif;
 font-size: 15px;
}

.section1 {
 width: 100%;
 height: 100vh;
 background: grey;
}

.section2 {
 width: 100%;
 height: 100vh;
 background: black;
}

<div class="navbar" id='nav'>
 <ul>
   <li><a href="" id="navi">Home</a></li>
   <li><a href="">News</a></li>
   <li><a href="">Gallery</a></li>
    <li>Home</li>
   <li>News</li>
   <li>Gallery</li>
 </ul>
</div>

<script type="text/javascript">
 var  nav = document.getElementById('nav');
 window.onscroll = function(){
  if (window.pageYOffset >100) {
   nav.style.background = "#FFF";
   nav.style.color = "#000";
   nav.style.marginTop = "-20px";
   nav.style.borderBottom = "1px solid #E5E5E5";
   nav.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
  } else {
   nav.style.background = "transparent";
   nav.style.color = "#FFF";
   nav.style.marginTop = "0px";
   nav.style.border = "none";
   nav.style.boxShadow = "none";
  }
 }
</script>
<div class="section1"></div>
<div class="section2"></div>

Can someone tell me, how i can change the link color (+ hover, visited)? I only know that i can change the text color with nav.style.color

Thanks for any help! I would be happy about tips, how I can improve my code. At least i want to create a navigation like this Businessx

Answer 1

Use the :link :visited :active :hover pseudo selectors

a:link {
  color: orange;
}

a:visited {
  color: magenta;
}

a:hover {
  color: lime;
}

a:active {
  color: red;
}

<a href="#">Link</a>
<a href="#a">Link2</a>
<a href="#b">Link3</a>

* {
  margin: 0 auto;
}

.navbar {
  width: 100%;
  position: fixed;
  transition: 1s;
  color: #FFF;
}

.navbar ul li {
  display: inline-block;
  padding: 35px 30px 20px 0px;
  font-family: sans-serif;
  font-size: 15px;
}

.section1 {
  width: 100%;
  height: 100vh;
  background: grey;
}

.section2 {
  width: 100%;
  height: 100vh;
  background: black;
}

.navbar {
  background: transparent;
  color: #FFF;
  margin-top: 0px;
  border: none;
  box-shadow: none;
}

.navbar.floating {
  background: #FFF;
  color: #000;
  margin-top: -20px;
  border-bottom: 1px solid #E5E5E5;
  box-shadow: 1px 2px rgba(0, 0, 0, 0.05);
}

a{
  color: inherit;
}

<div class="navbar" id='nav'>
  <ul>
    <li><a href="" id="navi">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Gallery</a></li>
    <li>Home</li>
    <li>News</li>
    <li>Gallery</li>
  </ul>
</div>

<script type="text/javascript">
  var nav = document.getElementById('nav');
  window.onscroll = function() {
    if (window.pageYOffset > 100) {
      nav.classList.add('floating');
    } else {
      nav.classList.remove('floating');
    }
  }
</script>
<div class="section1"></div>
<div class="section2"></div>