Jquery overruling css

Question

I am using jquery to make a fixed-position navigation bar fade to .5 opacity as it slides down. That works, but I also want to make the bar come back to opacity 1 if it's moused over. I tried the CSS :hover, but it didn't work.
HTML:

 <div id="top-links-bar"> 
<span class="top-link link-bar-link dropdown-opener" id="learn">Learn <span class="caret"></span></span> 
<a style="color:blue;" style="position:relative; right:50px; top:20px;"><span class="top-link link-bar-link" id="login-" >Login <span class="caret"></span></span></a>
     <a style="color:blue;" style="position:relative; right:100px; top:20px;"><span class="top-link link-bar-link" id="create-account"  >Create an Account</span></a>

    </div>
    <div id="learn-dropdown" class="dropdown" style="font-weight:bold;">
         content
    </div>
    <div class="dropdown" id="login">
        Username: <input type="text"><br>
        Password: <input type="password">
        </div>
        </body>

JS:

$(function () {

    $('.dropdown').hide();

    $('#learn').click(function () {
        $('#learn-dropdown').toggle().css('z-index', '200');
        $('#login').slideUp().css('z-index','0');
    });
    $('#login-').click(function(){
        $('#login').toggle().css('z-index', '200');
        $('#learn-dropdown').slideUp().css('z-index','0');       
    });

   /* $('body div:not(#top-links-bar)').click(function () {
        $('.dropdown').hide();
    });*/





    $(window).scroll(function () {
        if ($(this).scrollTop() > 40) {
            $('#top-links-bar').stop().fadeTo('fast', .5);
        } else {
            $('#top-links-bar').stop().fadeTo('fast', 1);
        }
    });
}); 

CSS:

    #top-links-bar {
        padding:30px;
        border:0px solid black;
        background: linear-gradient(gray, white);
        position:fixed;
        top:0px;
        width:100%;
        z-index:20;
        float:none;
        clear:none;
    }
/*THIS IS WHAT'S NOT WORKING*/
    #top-links-bar:hover {
        opacity:1;
    }
    .caret {
        border-left:5px solid transparent;
        border-right:5px solid transparent;
        border-top:5px solid black;
        display:inline-block;
        margin-top:5px;
        vertical-align:middle;
        transition:all 2s;
    }
    .caret:hover {
        border-top:5px solid green;
        cursor:pointer
    }
    .top-link {
        font-family:romeral;
        color:#1851EE;
        padding:30px;
        transition:color 2s, background 2s;
    }
    .top-link:hover {
        color:gray;
        background:linear-gradient(white, gray);
        cursor:pointer;
        border-left:1px solid black;
        border-right:1px solid black;
    }
    a {
        color:inherit;
    }
    .dropdown {
        font-family:champagnelimo;
        background:linear-gradient(gray, green);
        z-index:200;
        height:150px;
        width:100%;
        padding:50px;
        border:4px solid gray;
        position:fixed;
        top:100px;
    }
    ul li:visited {
        color:blue;
    }
    .snippet {
        font: bold 12pt/14pt josefin;
    }

fiddle

Answer 1

use !important, as jquery changes the css in inline style attribute so normal css wont apply becuase of precedence, refer to below list of precedence to understand the workings

use this css for hover

#top-links-bar:hover {
    opacity:1 !important;;
}

see fiddle Demo

Css order of precedence is

1. !important

2. Inline

3. Internal

4. External