Links to change colour with css not working properly

Question

I have some code for which I am trying to make a navbar. I have links in the code and I changed them when the page is scrolled up a little. I change the colours ok but cant change on hover to stay permanent? I seem to have tried everything but its like its resetting my css all the time. It works fine with the links but cant seem to change on hover colour to stay the same.

$(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/>

do you want the navbar links to change color on click? and stay like that until you click on another one?? — Teobis, Jul 12 '18 at 14:24
the on hover changes depending if the page has scrolled down a little because the background colour changes. All the colours change fine and back apart from a:hover!! — Sarah Pritchard, Jul 12 '18 at 14:26
Not sure if it is a typo but your `:hover` css has the wrong closing bracket. It's quite easy to see the issue here. You are setting colours in js which becomes inline css and it is overriding your css rules. Your js is doing a lot more work than it needs to. Just add a class to the entire nav bar when you pass 10 and set the colours in css instead of js — Huangism, Jul 12 '18 at 14:50

score 0 · Answer 1 · answered Jul 12 '18 at 14:37

Is this what you need?

$(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>

Hi, thanks and yes that works good to change the background colour when scrolled but not the text and link colours? Thanks — Sarah Pritchard, Jul 12 '18 at 15:05
in this code, the text color on 'a' tag is blue, then goes to grey on hover if your window scroll distance from top is lower than 10px. If you scroll past 10px, the '#nav' background changes to teal, and the 'a' tag is now red and goes to white on hover, ¿what else do you need to change after 10 px scroll from top? — Teobis, Jul 12 '18 at 15:12

score 0 · Answer 2 · answered Jul 12 '18 at 14:39

0

I think the problem is how you are trying to set the css properties. $(".nav-big a:link") selects the actual elements in the DOM tree, nit the corresponding rule in your .css file. Then, when you call ".css("property", "value")" on those elements, you effectively change their element.style property, which is equivalent to setting that property inline (i.e. `).

Since the specificity of inline styles is higher that that of styles defined in a .css file, your :hover rule in a .css file will not be applied anymore.

There isn't really a way to edit you .css files from either JavaScript or JQuery (which is still just a JavaScript library), so what you should do instead is dynamically add and remove classes as described here.

As a side note, you honestly don't need jQuery for such tasks in 2018. It has its uses, but those are all either advanced or obsolete. Loading a external library bloats your page and is overall frowned upon. .ready can be replaced by just placing your <script> tag at the end of the <body>, and others methods now have direct js counterparts. Please consider switching to native js especially if you are still learning the language.

answered Jul 12 '18 at 14:39

NoSock

90
7

Thanks but I dont quite understand what you mean? How am I supposed to try it then and what is .ready? Thanks – Sarah Pritchard Jul 12 '18 at 14:42
By `.ready` I meant `$(document).ready()`. This function that wraps your whole code snippet is used to ensure that whatever element you reference via `$('whatever')` already exists in the DOM. The same can be achieved by moving your – NoSock Jul 12 '18 at 14:49
I'm sorry if anything I have said sounds overwhelming, but DOM (Document Object Model) is really an important thing to know in JavaScript. If you don't want to go too deep in it, it is basically how what you see in your browser is made available to JavaScript. jQuery, for instance, is used to manipulate DOM, which in turn changes what you see on the page. jQuery methods are implemented in JavaScript, so you can do all of what jQuery does without it. You could read about it [here](https://www.w3schools.com/js/js_htmldom_methods.asp) – NoSock Jul 12 '18 at 14:56
try to learn and use inspector, that way you will see what is overriding your hover css – Huangism Jul 12 '18 at 14:58

Links to change colour with css not working properly

2 Answers2