CODEWITHSUNDEEP
jqueryhtmlcss
Mahaveer
Mahaveer

Reputation: 435

jQuery scroll event contradicting CSS hover

I have this navbar on top, When i hover over the links the CSS hover changes the color of links from white to wheat.

I also have jQuery code which changes the color of header and links when the user scrolls.

So the problem is that CSS hover works only once , as soon as the user scrolls up or down , the CSS hover stops working and i want the CSS hover to change color of links from white to wheat again as soon as the user scroll back to top.

here is the HTML

<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>
</body>

CSS

body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}

jQuery

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{  $('.navbar-inverse .navbar-brand').css({"color":"black"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
   $('.header').css({"background":"white"});
} else {
   $('.navbar-inverse .navbar-brand').css({"color":"white"});
   $('.header').css({"background":"rgba(1,1,1,.8)"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
}
});

I tried removeAttr("style") and it just removes the style completely

Upvotes: 0

Views: 408

Answers (2)

ghg565
ghg565

Reputation: 422

I like the !important tag from Tibi unless you want a different hover style when you are not at the top. To use separate hover colors for the top and otherwise you can add the styles back when the scroll is at the top with your jQuery like below, but be sure to add the style that you want for both the if and the else in you jQuery:

$('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});},function(){$(this).css({"color":"white"});});

and 

 $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});

Here is the working example:

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{  $('.navbar-inverse .navbar-brand').css({"color":"black"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
   $('.header').css({"background":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"balck"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"black"});});
} else {
   $('.navbar-inverse .navbar-brand').css({"color":"white"});
   $('.header').css({"background":"rgba(1,1,1,.8)"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
}
});
body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>

Upvotes: 1

Tibi Buzdugan
Tibi Buzdugan

Reputation: 82

You can either use !important on the :hover states (as in the snippet below) 

.navbar-inverse .navbar-nav>li>a:hover {
  color: red!important;
}

or reset the styles instead of hardcoding them (like in the jsfiddle example). You can do that using:

$('.navbar-inverse .navbar-nav>li>a').css({ "color": "" });

https://jsfiddle.net/o5s0015p/1/

Upvotes: 1

Related Questions