javascript - 更改链接颜色
问题描述
我绝对是 js 的新手 .. 我写了以下 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
解决方案
使用:link :visited :active :hover伪选择器
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>
推荐阅读
- c - 不能在 C 中将 sscanf() 用于 char 数组
- java - 无法使用 Java 创建带有日历 API 的 hangoutsMeet
- r - R Markdown 针织到 PDF 格式问题
- android - 在 Android 中调度 JobService - 最小周期间隔
- c - cs50 pset4/less 反映 check50 不工作
- java - 在spring security中排除身份验证以通过过滤器
- assembly - 通过利用堆栈重定向逻辑流
- android - 即使实现了后退按钮关闭,它也不起作用
- gfortran - 将 gfortran 编译的二进制文件分发给没有 Xcode 的 Mac OS X 用户?
- python - 接收 KeyError 但键存在于嵌套字典中