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

Answer 1

使用 !important，因为 jquery 更改了 inline style 属性中的 css，所以正常的 css 不会因为优先级而应用，请引用下面的优先级列表以了解工作原理

将此 css 用于悬停

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

参见 fiddle Demo

CSS 优先顺序是

1. !重要

2. 内联

3. 内部

4. 外部