如何在鼠标悬停时切换两个按钮？

Question

我有两个按钮：
1 - 跟随
2 - 取消关注

乍一看，将显示“关注”按钮，然后当您将鼠标悬停在“关注”按钮上时，我想让关注按钮消失并显示“取消关注”按钮，然后在“取消关注”按钮上方悬停一次后，我想要按下按钮出现和取消关注按钮消失，所以我该怎么办？

欢迎反馈。

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

我所说的另一种更优化的解决方案可以针对同一个按钮进行，如下所示：

<强> 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');           
       });
});

<强>更新

如果您想在hover而不是点击相同，则可以将.on('click'更改为hover，如下所示：

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

Answer 2

请尝试以下代码：

它将隐藏click ed按钮并显示其他按钮。

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

演示：https://jsfiddle.net/tusharj/Ls8gk2es/

Answer 3

我认为使用悬停事件可以使其变得更简单。

<强> HTML

$(document).on('change', '[id*=select1]', function () {
            alert('in change select1');
});

<强> JS

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

CSS （与问题中提供的样式相同）

Answer 4

使用jquery很容易。只需使用jquery .hover（）

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

Answer 5

你可以玩

.addClass

以触发事件

然后.removeClass 和{{1}}

申请或删除您的CSS课程。

Answer 6

如何使用这样的js：

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

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

Answer 7

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

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

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