CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user7791702
user7791702

Reputation: 290

Hover effect not working properly on each element after first time hover

I have a code and here it is :

$(document).ready(function() {
   $('#pop li').hover(
    function() {
        $('#s').removeClass('follower2').addClass('follower1');
        $('p.follower1').eq($(this).index()).show();
//                $("#s").css('display','none');
    }, function() {
        $('#s').removeClass('follower1').addClass('follower2');
        $('p.follower1').eq($(this).index()).hide();
    }); 

});

About the code:

The code is actually showing the elements on hover.

What's the problem:

The Problem by default there is Followers written on the page. On hover first time on Facebook, Twitter it disappear working and likes, tweets appers respectively ( fine till here as expected ) but when I hover on Instagram for the first the works as expected after hovering instagram the thing start going worng. On second hover the default Followers does not disapper.

Please check my codepen to see the problem

UPDATED:

What I want:

After hovering on the instagram the things going wrong I want to fix that ( means as I hover on the instagram and again I try to hover on facebook or twitter the follower for instagram does not disapper. How can I fix this

Upvotes: 0

Views: 391

Answers (2)

Ehsan
Ehsan

Reputation: 12959

Try This:

$(document).ready(function(){
    $('#pop ul li').hover(function(){
        $('.col-md-3 p').css('display','none');
        $('.col-md-3 p').eq($(this).index()).css('display','block');
    })
})
.follower1 {
    display: none;
}
.follower2 {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pop">
  <ul class="list-inline social-icon">
      <li><a href="#!"><span>FaceBook</span></a></li>
      <li><a href="#!"><span>Twitter</span></a></li>
      <li><a href="#!"><span>Instagram</span></a></li>
  </ul>
</div>

<div class="col-md-3 align-center">
    <p class="follower1">Likes<br>1,082</p>
    <p class="follower1">Twitter<br>3,023</p>
    <p id="s" class="follower2">Followers<br>2,089</p>
</div>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The way you have handled the classes is the problem, you can simplify it to

$(document).ready(function() {
  $('#pop li').hover(function() {
    $('#s p').hide().eq($(this).index()).show();
  }, function() {
    $('#s p').hide();
  });
});
#s .follower{display: none;}
#s .follower:last-child{display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop">
  <ul class="list-inline social-icon">
    <li><a href="#!"><span>FaceBook</span></a></li>
    <li><a href="#!"><span>Twitter</span></a></li>
    <li><a href="#!"><span>Instagram</span></a></li>
  </ul>
</div>

<div id="s" class="col-md-3 align-center">
  <p class="follower">Likes<br>1,082</p>
  <p class="follower">Twitter<br>3,023</p>
  <p class="follower">Followers<br>2,089</p>
</div>

Upvotes: 1

Related Questions