【发布时间】：2018-12-20 19:46:38
【问题描述】：
我有一些代码正在尝试制作导航栏。我在代码中有链接，当页面向上滚动一点时我更改了它们。我可以更改颜色，但无法在悬停时更改以保持永久状态？我似乎已经尝试了一切，但它就像它一直在重置我的 CSS。它适用于链接，但似乎无法更改悬停颜色以保持不变。
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".white").css("background", "#362c6e");
$(".white").css("color", "#ffffff");
$(".nav-login").css("color", "#ffffff");
$(".nav-big a:link").css("color", "#ffffff");
$(".nav-more a:link").css("color", "#ffffff");
}
if (scroll < 10) {
$(".white").css("background-color", "rgba(255, 255, 255, 0)");
$(".white").css("color", "#111111");
$(".nav-login").css("color", "#362c6e");
$(".nav-big a:link").css("color", "#362c6e");
$(".nav-more a:link").css("color", "#362c6e");
}
})
}).image-container-left {
margin-left: 40px;
margin-top: 0px;
}
#nav {
overflow: hidden;
width: 100%;
/* Full width */
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
list-style: none;
}
.nav-image-left {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 17px;
margin-left: 5px;
float: left;
list-style: none;
}
.nav-big {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 37px;
float: left;
list-style: none;
margin-left: 5%;
}
.nav-more {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 37px;
margin-left: 30px;
;
float: left;
list-style: none;
}
.nav-login {
list-style-type: none;
float: right;
margin-top: 37px;
margin-right: 40px;
color: 362c6e;
}
.nav-big a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-more a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-big a:link {
color: #362c6e;
}
.nav-more a:link {
color: #362c6e;
}
.nav-more a:hover {
color: #e73972;
)
.nav-big a:hover {
color: #e73972;
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='container-fluid white hidden-xs hidden-sm'>
<ul>
<li class='nav-image-left'>
<div class='image-container-left'>
<a href=index><img src='images/ctbig.png' height='62' alt='image-left' /></a>
</div>
</li>
<li id="nav-big" class='nav-big'><a href='updating'> About us </a></li>
<li class='nav-more'><a href='updating'> Register new job </a></li>
<li class='nav-more'><a href='updating'> Register business </a></li>
<li class='nav-more'><a href='updating'> Contact us </a></li>
<li class='nav-more'><img src='images/users.png' alt='image-right' width='22' /><a href='updating'> Login </a></li>
<li class='nav-login'>0800 038 6210</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>【问题讨论】：
-
您希望导航栏链接在点击时改变颜色吗？并保持这种状态，直到您点击另一个？？
-
悬停时的变化取决于页面是否向下滚动了一点，因为背景颜色发生了变化。除了 a:hover!!
-
不确定是否是拼写错误，但您的
:hovercss 的右括号错误。在这里很容易看到这个问题。您在 js 中设置颜色，它变成了内联 css，它覆盖了您的 css 规则。你的 js 做的工作比它需要的要多得多。当你通过 10 并在 css 而不是 js 中设置颜色时，只需向整个导航栏添加一个类
标签： javascript jquery html css