懸停效果不是第一次之後的每個元素上正常工作懸停

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上的第一個預期的作品之後，開始工作。在第二次懸停時，默認的關注者不會消失。

請檢查我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

您已經處理的類的方式有問題，你可以把它簡化爲

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