How to toggle two buttons on mouse hover?

Question

I've two buttons:
1 - Follow
2 - Unfollow

At first glance the Follow button will be displayed and then when you hover over the Follow button, then I want to make the follow button to disappear and Unfollow button to appear, then after once hovered over the Unfollow button then I want the Follow button to appear and Unfollow button to dispear, so I how do I do it?

Feed backs are welcomed.

HTML CODE

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

CSS CODE

.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

An alternative and more optimal solution as I said which can be done for same button as below:

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

If you want the same on hover instead of click you can change .on('click' to hover as below:

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

Answer 2

Try following code:

It will hide the clicked button and show other button.

$('.btn-follow').on('click', function () {
    $(this).hide();
    $('.btn-unfollow').show();
});
$('.btn-unfollow').on('click', function () {
    $(this).hide();
    $('.btn-follow').show();
});

Demo: https://jsfiddle.net/tusharj/Ls8gk2es/

Answer 3

I think using hover event you can make it simpler.

HTML

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

JS

$('.btn-unfollow').hide();
$('.btn').hover(function () {
    $('.btn').toggle();
});

CSS (same as the styling given in your question)