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

我有一个代码，这里是：

$(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后，事情开始运转。第二次悬停时，默认的跟随者不会消失

请检查我的电脑以查看问题

更新：

我想要什么：

在instagram上悬停之后，我想纠正出现的问题（意思是当我在instagram上悬停并再次尝试在facebook或twitter上悬停时，instagram的关注者不会消失。我如何解决这个问题？尝试以下方法：

$（文档）.ready（函数（）{
$（'pop ul li'）。悬停（函数（）{
$（'.col-md-3p'）.css（'display'，'none'）；
$（'.col-md-3p'）.eq（$（this.index（））.css（'display'，'block'）；
})
})

.follower1{
显示：无；
}
.跟随者2{
显示：块；
}

喜欢
Twitter
3023

追随者
2089

试试这个：

$（文档）.ready（函数（）{
$（'pop ul li'）。悬停（函数（）{
$（'.col-md-3p'）.css（'display'，'none'）；
$（'.col-md-3p'）.eq（$（this.index（））.css（'display'，'block'）；
})
})

.follower1{
显示：无；
}
.跟随者2{
显示：块；
}

喜欢
Twitter
3023

追随者
2089

您处理类的方式就是问题所在，您可以将其简化为

$（文档）.ready（函数（）{
$（'#pop li'）。悬停（函数（）{
$（'s p'）.hide（）.eq（$（this.index（））.show（）；
}，函数（）{
$（'s p'）.hide（）；
});
})；

#s.follower{display:none；}
#s.follower:最后一个子项{display:block；}

喜欢
Twitter
3023

追随者
追随者
2089

您处理类的方式就是问题所在，您可以将其简化为

$（文档）.ready（函数（）{
$（'#pop li'）。悬停（函数（）{
$（'s p'）.hide（）.eq（$（this.index（））.show（）；
}，函数（）{
$（'s p'）.hide（）；
});
})；

#s.follower{display:none；}
#s.follower:最后一个子项{display:block；}

喜欢
Twitter
3023

追随者
追随者
2089

您希望输出什么？@Sumitpatel，正如您在我的代码笔中看到的那样。在instagram上悬停之后，我想修复出现问题的地方。您希望输出什么？@Sumitpatel，正如您在我的代码笔中看到的那样。在instagram上悬停之后，我想修复出现问题的地方。