首次悬停后，悬停效果在每个元素上都无法正常工作答案

【问题标题】：Hover effect not working properly on each element after first time hover首次悬停后，悬停效果在每个元素上都无法正常工作
【发布时间】：2017-06-24 05:09:43
【问题描述】：

我有一个代码，这里是：

$(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 的关注者并没有消失。我该如何解决这个问题

【问题讨论】：

你除了输出什么？
@Sumitpatel 正如您在我的代码笔中看到的那样。将鼠标悬停在 Instagram 上后，我想解决问题。

标签： javascript jquery html css hover

【解决方案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>

【讨论】：

【解决方案2】：

你处理类的方式是问题，你可以把它简化为

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

【讨论】：