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..

    How can I make a CSS Wrapper adjust height automatically?

    How do I use CSS to to vertically center align an image in a div?

    How can I change the selection text background using CSS?

    How to minify HTML with CSS and Javascript? [closed]

    How to call a javascript function with a css button? [closed]

    Modify CSS class “two” if class “one” is not shown on screen

    How to control the speed of a SVG line animation with CSS

    How to color a responsive table in Bootstrap?

    How to add a background image or theme through CSS?

    how to change the css in td on mouse click using javascript

    How to make css styles in the document body only specific to a div

    How to write CSS3 animations with JavaScript objects?

    How to select only one child element in CSS?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to move hamburger menu to the front of overlay menu

    How to position a div under a link on click?

    How to make a CSS table with use of DIV UL LI

    How to remove Menu Item Class form secondary menu

    How specify two css classes: from property and conditional class

    How to get html elements from different class xpath?

    How to achieve pages like a math notebook in css?

    How to apply css to three different classes hovering one of them

    Wordpress nav menu images not showing up in mobile safari

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How to eliminate the overlap border using CSS only

    How to use css classes in Best way without redundant?

    How to right align a flipswitch in jquery mobile 1.4.5

    Angular show / hide with animation

    How to put a space in front of a next line [closed]