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 set a border in alignment with other borders

    How do I align columns in the center of the page? [duplicate]

    How to get a CSS animation to run through the correct steps

    How to disable properties of external css class and use internal css class with same name but different property in html

    CSS: How can I have a
    within a expand the table horizontally?
    To answer your first question and to supplement LJ's answer: Here is the relevant part of the spec to explain why the table expands to contain the inner div and...
    Read more

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How to use CSS to style the results of a PHP echo?

    HTML/CSS: How to change image opacity when the text over it is Mouseovered?

    How to correctly apply a CSS style to all the images in a div having a specific class?

    How can I modify left property after hide an element using JQuery?

    How to make Bootstrap sticky footer content go full page height?

    How to make jQuery add css dynamaically on window resize

    How to point to a specific icon in an icon set?

    CSS show elements below each other

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    How to render no-table HTML form into two columns with CSS using classes?

    Navbar on left of page, how to let content resize to match screen size?

    CSS page headers - how to use print margins?

    How to make layout with 3 elements where 1 is resizable

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    How can I make a CSS Wrapper adjust height automatically?

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How does CSS float work when applied to an “ul” element

    How to choose second and third element (li) in
      tag (with CSS)?

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    How to center a span inside a TD?

    How to style webpage with percentages

    How to apply CSS style for the current page link

    CSS How to change background color of text?

    PNG image showing up with white background even though it has a clear background