jquery推翻css

Question

我正在使用jquery將一個固定位置的導航欄淡化爲.5不透明，因爲它向下滑動。這是有效的，但我也想讓酒吧回到不透明1，如果它被淹沒了。我嘗試了CSS :hover，但沒有奏效。
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