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优先顺序是

<强>！重要
<强>内联
内部
<强>外部

Jquery推翻css

1 个答案: