jQuery推翻css答案

【问题标题】：Jquery overruling cssjQuery推翻css
【发布时间】：2015-04-12 20:58:04
【问题描述】：

我正在使用 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

【问题讨论】：

这是因为 jQuery 直接在元素上设置了 opacity 样式（即 inline）并且优先于 CSS 文件中定义的规则（以及 <style> 块中定义的规则） )。
我应该使用 jquery mouseenter() 和 mouseleave() 函数吗？
要么，要么使用 !imporant 作为 A.B.建议。
请发布完整的代码示例在您的问题中。您在链接到 jsFiddle 时看到了警告，但您选择通过突出显示几个单词作为代码来尝试避开它。如果 jsFiddle 消失或无法访问，那么您的问题将对未来的访问者失去所有价值。
您可以使用 JQuery 添加/删除 css 类，而不是直接更改不透明度。并使用 css 过渡处理淡入淡出效果。

标签： jquery html css

【解决方案1】：

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

使用这个 CSS 进行悬停

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

见fiddle Demo

css的优先顺序是

!important
内联
内部
外部

【讨论】：