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

【问题标题】：How to toggle two buttons on mouse hover?如何在鼠标悬停时切换两个按钮？
【发布时间】：2015-05-15 16:33:52
【问题描述】：

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

乍一看会显示关注按钮，然后当您将鼠标悬停在关注按钮上时，我想让关注按钮消失并显示取消关注按钮，然后将鼠标悬停在取消关注按钮上之后，我想要关注按钮出现，取消关注按钮消失，我该怎么做？

欢迎反馈。

HTML 代码

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

CSS 代码

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

【问题讨论】：

如何在切换时更改相同button 的文本？？
我希望背景也改变
这个也可以……
@Mohamed 你确定hover 还是click？
@Tushar 这两种方式也很好。能做到吗？

标签： jquery html css

【解决方案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(){
  ......
});

【讨论】：

这是我的代码笔链接codepen.io/anon/pen/aONqyR 我现在想要的是，当我将鼠标悬停在关注按钮上时，它应该显示取消关注按钮，当单击悬停状态下的取消关注 btn 时，它应该删除整个元素框。如何使用 jquery 来实现？
提到整个元素框是指类foll-container的div吗？我的意思是你想删除那个 div？？
不。我想让 '.foll' 消失
嗯...那太好了。但是有这样的列呢codepen.io/anon/pen/aONqyR

【解决方案2】：

试试下面的代码：

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

$('.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/

【讨论】：

【解决方案3】：

我认为使用悬停事件可以让它更简单。

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（与您问题中给出的样式相同）

【讨论】：

【解决方案4】：

使用 jquery 很容易。只需使用 jquery .hover()

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

【讨论】：

【解决方案5】：

你可以玩

.mouseenter()
.mouseleave()

为了触发事件

然后.addClass 和.removeClass

应用或删除您的 css 类。

【讨论】：

【解决方案6】：

这样使用js怎么样：

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：