CODEWITHSUNDEEP
jqueryhtmlcss
Firnas
Firnas

Reputation: 389

How to toggle two buttons on mouse hover?

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

Upvotes: 8

Views: 2793

Answers (7)

Lini Susan V
Lini Susan V

Reputation: 1195

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)

Upvotes: 1

Harsha Biyani
Harsha Biyani

Reputation: 7268

$(document).ready(function () {     
        $('.btn-follow').mouseover( function(){

            $(this).hide();
            $('.btn-unfollow').show();
        });

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

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 6

Tushar
Tushar

Reputation: 87203

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/

Upvotes: 2

dsharew
dsharew

Reputation: 10665

How about using js like this: 

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

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

Upvotes: 0

Makis
Makis

Reputation: 1244

You can play with 

.mouseenter()
.mouseleave()

in order to trigger the event

and then .addClass and .removeClass

to apply or remove your css classes.

Upvotes: 0

Tech Savant
Tech Savant

Reputation: 3766

Its pretty easy with jquery. Just use jquery .hover()

$( ".btn-follow" ).hover(
  function() {
    $( this ).addClass('btn-unfollow');
    $( this ).html( 'Unfollow' );
  }, function() {
    $( this ).removeClass('btn-unfollow');
    $( this ).html( 'Follow' );;
  }
);

Upvotes: 0

Related Questions