Question

我有一个代码，现在是：

$(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();
    }); 

});

关于代码：

代码实际上是在悬停时显示元素。

问题是什么：

问题默认情况下，页面上会写有关注者。在Facebook上第一次徘徊，Twitter它消失了工作和喜欢，分别发布推文（直到这里按预期好）但是当我在Instagram上徘徊时，第一次按照预期工作，在徘徊Instagram之后，事情就开始了。在第二次悬停时，默认的追随者不会消失。

请检查我的codepen以查看问题

更新：

我想要的是什么：

在Instagram上徘徊后出现问题我想解决这个问题（意味着当我在Instagram上盘旋并再次尝试在facebook或Twitter上盘旋时，Instagram的关注者不会消失。我该如何解决这个问题

Answer 1

试试这个：

$(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>

Answer 2

您处理类的方法是问题，您可以将其简化为

＆＃13;

$(document).ready(function() {
  $('#pop li').hover(function() {
    $('#s p').hide().eq($(this).index()).show();
  }, function() {
    $('#s p').hide();
  });
});

＆＃13;

#s .follower{display: none;}
#s .follower:last-child{display: block;}

＆＃13;

<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>

＆＃13;

第一次悬停后，悬停效果在每个元素上无法正常工作

2 个答案: