2
jQueryを使ってスクロールするとnavbarを崩壊しようとしています。私はあなたがそれらの上にマウスを置くとき、私のnavbarのすべてのリンクを赤くすることができるようにしたい。しかし、ナビゲーションバーは正常に動作しますが、ページを下にスクロールすると、CSSカラーとホバーセレクタが機能しないように見えます。 codepenのリンクはhttp://codepen.io/mrsalami/pen/kkpoPBです。JQueryがCSSのホバーセレクタに影響しているようです
私のHTMLコード
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Student Support</a>
</div>
<div id="navbar" class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">FAQ'S</a></li>
<li><a href="#">Availability</a></li>
<li><a href="#">Live Chat</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="./">Login <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-
</nav>
マイCSS
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
color:red;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.navbar-default {
background-color:rgba(0, 0, 0, 0.9);
border-color:transparent;
font-size: 16px;
}
.navbar-default .navbar-nav > li > a{
padding-left: 20px;
padding-right: 20px;
color:#fff;
border-bottom-color: transparent;
}
.navbar-default .navbar-brand{
color: #fff;
}
.top-nav-collapse {
background:#F8F8F8;
padding: 0;
font-size: 17px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: black;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
background: transparent;
font-weight: bold;
}
私のjQueryの
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
$(document).scroll(function(){
if($(this).scrollTop() > 50)
{
$('.navbar-default .navbar-nav > li > a').css({"color":"#777"});
} else {
$('.navbar-default .navbar-nav > li > a').css({"color":"#fff"});
}
});
$(document).scroll(function(){
if($(this).scrollTop() > 50)
{
$('.navbar-default .navbar-brand').css({"color":"#777"});
} else {
$('.navbar-default .navbar-brand').css({"color":"#fff"});
}
});
一つ、あなたはそれが非常に高い優先度を持つCSSで色を設定。あなたがしたいことは、特定のスタイルを設定するのではなく、クラスを追加/削除することです。 – JonSG
JSを使用して色を追加すると、CSSホバー擬似セレクタはスタイルを適用するのに十分な優先順位を持ちません。 あなたは、おそらく、クラスを追加したり削除したりする方がよいでしょう。 デモ：http://codepen.io/marioluevanos/pen/ozyGvK?editors=0110 – bullzito