如何在鼠标悬停时切换两个按钮？

Question

我有两个按钮:
1 - 跟随
2 - 取消关注

乍一看,将显示"关注"按钮,然后当您将鼠标悬停在"关注"按钮上时,我想让关注按钮消失并显示"取消关注"按钮,然后在"取消关注"按钮上方悬停一次后,我想要"关注"按钮出现和取消关注按钮消失,所以我该怎么做？

欢迎反馈.

HTML代码

<div class="btn-follow">Follow</div>
<div class="btn-unfollow">Unfollow</div>

CSS代码

.btn-follow {
    color: #FFF;
    background-color: #38B7EA;
    padding: 5px 0;
    width: 100px;
    margin: 0 auto;
    border-radius: 20px;
}
.btn-unfollow {
    color: #FFF;
    background-color: #A5BECB;
    padding: 5px 0;
    width: 100px;
    margin: 0 auto;
    border-radius: 20px;
}

Answer 1

我所说的另一种更优化的解决方案可以用于下面的相同按钮:

在这里演示

HTML

<button id="followUnFollow" class="followUnF follow">Follow</button>

JS

$(document).ready(function(){
       $('#followUnFollow').on('click',function()
       {
           if($(this).hasClass('follow'))
               $(this).removeClass('follow').addClass('unfollow').text('Unfollow');
           else
               $(this).removeClass('unfollow').addClass('follow').text('Follow');           
       });
});

UPDATE

如果你想在同一个hover,而不是点击,您可以更改.on('click'到hover如下:

$('#followUnFollow').hover(function(){
  ......
});