color on hover is not changing

Question

 $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", "box-shadow": "0px 0px 4px #ddd" }); $(".nav-link").addClass("link-color"); $(".nav-item a").hover(function() { $(this).css("color", "#150945 !important"); }) } else { $(".nav-bg").css({ "background": "transparent", "box-shadow": "none" }); } }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="nav-item"> <a href="#contact" class="nav-link pi">THOUGHTS</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link pi">CONTACT</a> </li>

Expected Output : On hover the link color should change. The thing is when i add any other properties other than color it works. But when i add color it doesnt work.

Answer 1

It's because of the !important keyword. You can remove it and it will works.

You don't need to specify !important within inline css.

 $(document).ready(function(){ $(window).scroll(function(){ var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({"background":"#fff","box-shadow":"0px 0px 4px #ddd"}); $(".nav-link").addClass("link-color"); $(".nav-item a").hover(function(){ $(this).css("color", "red"); }) } else{ $(".nav-bg").css({"background":"transparent","box-shadow":"none"}); } }) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br/><br/>Scroll &darr; <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <ul> <li class="nav-item"> <a href="#contact" class="nav-link pi">THOUGHTS</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link pi">CONTACT</a> </li> </ul> <br/>