How to toggle two buttons on mouse hover?


Tags: jquery,html,css

Problem :

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;
}


Solution :

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(){
  ......
});

    CSS Howto..

    Bold text not showing on iPhone but displays fine on Android

    How to add a mobile optimised external CSS to a Shopify site

    How to remove css from DOM

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    How to change css position left to right using jquery?

    How to change social network icons colors in fixed menu?

    how to create an anchor point

    How to size images loaded from other users such that dimensions are maintained yet a max width and height are set with css? (HTML/JS/CSS)

    Box-shadow is overlapping other elements, how can I fix it?

    How to shrink the width size hyperlink?

    How to make CSS for search results

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How to change img style inside span in CSS?

    how to replace text with image in html/css

    How can I import a single string line of text to multiple HTML files?

    When I use
    • , how to let the element inside the li float left but the

    How do you use csslint from the command line?

    How to make the posts of a content type horizontal scrollabel?

    How to create icons like font awesome

    How to align

    and tags side-by-side?

    How do I control the wrapping of these
  • items?
  • How to position the sharing buttons on upper-left corner of the game and not the view?

    How to put button next to Image in CSS?

    How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

    How to do formatting using CSS to table

    How can I fix the menu on the implanted header?

    How to hold a css style on hover

    CSS how to deal with a lot of sprite without having to create a new css class

    CSS: how to keep image never modified with same “offset” all the time?

    css3 pure: how to hover an element outside?