更改链接颜色

Question

更改链接颜色

3

我完全是个 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>

有人能告诉我如何更改链接的颜色（包括悬停和访问后）吗？我只知道可以使用nav.style.color更改文本颜色。

感谢任何帮助！我希望得到一些提示，如何改进我的代码。至少我想创建一个类似于Businessx的导航。

- Cloud

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vitim.us · Accepted Answer

使用:链接 :已访问 :激活 :悬停伪类选择器

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>