链接更改颜色，而CSS无法正常工作

时间：2018-07-12 14:17:25

标签： javascript jquery html css

我有一些我要为其创建导航栏的代码。我在代码中有链接，并在页面向上滚动一点时更改了它们。我可以更改颜色，但不能在悬停时更改以保持永久性吗？我似乎已经尝试了所有方法，但就像它一直在重置我的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/>

2 个答案:

答案 0 :(得分：0)

这是您需要的吗？

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      
            $('#nav').toggleClass('before10',!(scroll > 10)); // toggle Class ad or remove a class considering the second parameter being true or false
            $('#nav').toggleClass('after10',(scroll > 10));// toggle Class ad or remove a class considering the second parameter being true or false

  })
})
body{
	min-height:700px;
}
.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 ul li a{
	color:blue;
	text-decoration:none;
}

#nav.before10 ul li a{
	color:blue;
	text-decoration:none;
}
#nav.before10 ul li a:hover{
	color:grey;
}
#nav.after10{
	background:teal;
}
#nav.after10 ul li a{
	color:red;
	text-decoration:none;
}
#nav.after10 ul li a:hover{
	color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='before10 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>

答案 1 :(得分：0)

我认为问题是您如何尝试设置css属性。 $(".nav-big a:link")选择DOM树中的实际元素，并在.css文件中设置相应的规则。然后，当您在这些元素上调用“ .css（” property“，” value“）”时，您可以有效地更改其element.style属性，这相当于将该属性内联设置（即`）。

由于内嵌样式的specificity高于.css文件中定义的样式，因此您的.css文件中的:hover规则将不再适用。

实际上并没有一种方法可以通过JavaScript或JQuery（仍然只是一个JavaScript库）来编辑.css文件，因此您应该做的是here中所述的动态添加和删除类。

作为一个旁注，老实说，您在2018年不需要jQuery来执行此类任务。它有其用途，但是它们都是高级的或过时的。加载外部库会使您的页面blo肿，并且总体上感到皱眉。只需将.ready标记放在<script>的末尾即可替换<body>，其他方法现在具有直接的js对应物。如果您仍在学习该语言，请考虑尤其是切换到本机js。

相关问题
最新问题