0

I am building a very simple static site on Rails. I am using a Bootstrap nav bar. The Bootstrap link default color is grey, so I have used this in my SASS file to reset it: 

nav {
    a {
        color: white  !important;
    } 
}

Not rocket science. The problem arises when I try to use JQuery to override that setting. I want the link to turn a bluish color when people hover over it. Here is my JQuery: 

$(document).on('turbolinks:load', function() {
$('a').hover(function(){
        $(this).animate({'color':'#00ddda !important'},400);
    },
    function(){
        $(this).animate({'color':'white !important'},400);
});
})

This does not work unless I remove the !important statement from the original SASS file. But if I remove the !important statement from the SASS file, the links start out grey. It works AFTER you hover and it returns to white, but at the start they are grey, which is not what I want. Can someone help? I'm not sure what to do.

J Seabolt
  • 2,576
  • 5
  • 25
  • 57
  • did you try to use css nav a:hover { color: #00ddda !important; } , maybe you can not override a CSS !important style but you could think about removing the !important statement and editing the selector so that it will have the css specificity necessary to get the style applied read about specificity http://cssspecificity.com/ read about the css :hover selector https://www.w3schools.com/cssref/sel_hover.asp – Fabrizio Bertoglio Feb 16 '17 at 19:02
  • Yes, I originally just did that. I want a JQuery transition though, not just a snap change. It seems like there MUST be a way to do this without reverting back to plain CSS. – J Seabolt Feb 16 '17 at 19:08
  • You need to override that !important style, with a style with a higher specificity. so Instead of `$('a')` you may want to use a more specific div for example `$('nav a')` or even something more specific. So check those links about specificity I sent you and the following discussion http://stackoverflow.com/questions/11178673/how-to-override-important#11178731 – Fabrizio Bertoglio Feb 16 '17 at 19:13

1 Answers1

0

If you remove the !important statement in SASS and do inline styling instead on the link in the HTML page, it works. 

<li class="nav_item nav_link"><%= link_to "Home", root_path, style: 'color: white !important' %></li>
Fabrizio Bertoglio
  • 5,890
  • 4
  • 16
  • 57
J Seabolt
  • 2,576
  • 5
  • 25
  • 57