滾動時如何保持'懸停'效果，同時使用JQuery的顏色變化效果

我想創建導航欄的滾動文本更改顏色的效果。問題是，一旦你開始滾動，用css完成的懸停效果不再起作用。有誰知道如何解決這個問題？滾動時如何保持'懸停'效果，同時使用JQuery的顏色變化效果

這是我的代碼：

$(document).ready(function() { 
 
    var scroll_pos = 0; 
 
    $(document).scroll(function() { 
 
    scroll_pos = $(this).scrollTop(); 
 
    if (scroll_pos > 600) { 
 

 
     $(".normalmenuitem").css('color', '#a9a9a9'); 
 
    } else { 
 

 
     $(".normalmenuitem").css('color', '#5f666f'); 
 
    } 
 
    }); 
 
});

body { 
 
    min-height: 4000px; 
 
} 
 
.box { 
 
    background-color: #fff; 
 
    position: absolute; 
 
    height: 59px; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 
.navigationmenu { 
 
    position: fixed; 
 
    z-index: 1000; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
#logo { 
 
    transform: translateY(-50%); 
 
    position: absolute; 
 
    top: 29px; 
 
    left: 17px; 
 
    width: 160px; 
 
} 
 
/* top right menu! */ 
 

 
.holderrr { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 0px; 
 
} 
 
.rightmenu { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    font-family: sourcesanspro-semibold; 
 
    font-size: 15px; 
 
    padding: 6px 17px 6px 17px; 
 
} 
 
.normalmenuitem { 
 
    padding: 6px 17px 6px 17px; 
 
    text-decoration: none; 
 
    color: #5f666f; 
 
    transition: .3s color; 
 
} 
 
.normalmenuitem:hover { 
 
    color: #292f36; 
 
} 
 
#trial { 
 
    color: #e16065; 
 
} 
 
#trial:hover { 
 
    color: #d64f54; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="navigationmenu"> 
 

 
    <div class="box"></div> 
 

 
    <div class="nav"> 
 
    <a href="http://braemo.com"> 
 
     <img id='logo' src="http://images8.webydo.com/92/9273203/3958%2f4F9144FD-A273-B76D-94C9-3D8B569C8993.png"> 
 
    </a> 
 
    </div> 
 

 
    <div class="holderrr"> 
 
    <div class="rightmenu"> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Features</a> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Pricing</a> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Stories</a> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Blog</a> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Language</a> 
 
     <a class="normalmenuitem" href='http://braemo.com/support.html'>Support</a> 
 
     <a class="normalmenuitem" href='http://dashboard.braemo.com'>Log In</a> 
 
     <a class="rightmenu" id="trial" href='http://braemo.com/pricing.html'>Start Free Trial</a> 
 
    </div> 
 
    </div> 
 

 
</div>

來源

2016-07-27 C v Eijk

您正在嘗試滾動，同時在文本上徘徊，我是否正確理解？ – Zoheiry

你需要這種行爲？ https://jsfiddle.net/z7je0vn6/ –

唯一的問題，我看到的是，navbar是不是固定頂部 –

你的問題是，jQuery的覆蓋CSS，如果你希望你的CSS覆蓋jQuery的你又不得不使用!important例如：

.normalmenuitem:hover { 
    color: #292f36 !important; 
}

這是一個工作示例https://jsfiddle.net/jL2z8yy4/

來源

2016-07-27 15:43:29 Zoheiry

謝謝！這工作！ –

滾動時如何保持'懸停'效果，同時使用JQuery的顏色變化效果

回答

相關問題