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

我有两个按钮：
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;
}

解决方法

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

DEMO HERE

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

如果您想在悬停而不是点击时使用相同的内容,则可以更改.on(‘click’悬停如下：

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