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

Question

我有两个按钮：
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;
}

- Firnas

---

如何在切换时更改相同“按钮”的文本？ - Guruprasad J Rao

我希望背景也能改变。 - Firnas

那也可以做到... - Guruprasad J Rao

@ Tushar 两种方法都可以。这可行吗？ - Firnas

你可能想要使用 outline: none 来隐藏 Chrome 浏览器中围绕按钮的蓝色边框。 - Kos

Answer 1

如我所说的，针对下面相同的按钮，还有另一种更优的解决方案：

点击此处查看演示

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

更新

如果您想在鼠标悬停而不是点击时实现相同的效果，您可以将.on('click'更改为hover，如下所示：

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

- Guruprasad J Rao

---

这是我的CodePen链接 http://codepen.io/anon/pen/aONqyR现在我想要的是，当我悬停在“关注”按钮上时，它应该显示“取消关注”按钮，当我点击“取消关注”按钮并且鼠标再次悬停在它上面时，整个元素框应该被移除。如何使用jQuery实现这个功能？ - Firnas

你提到的“整个元素框”是指具有类名foll-container的div吗？我的意思是你想要删除那个div吗？ - Guruprasad J Rao

不，我想让'.foll'消失。 - Firnas

嗯...这很棒。但是怎么样才能像这样有两列 http://codepen.io/anon/pen/aONqyR - Firnas

Answer 2

尝试以下代码：

它将隐藏所点击的按钮并显示其他按钮。

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

- Tushar

Answer 3

我认为可以使用 hover 事件使它更简单。 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（与您问题中提供的样式相同）

- Lini Susan V

Answer 4

使用jQuery非常容易。只需使用jQuery .hover()即可。

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

- Tech Savant

Answer 5

你可以玩耍

.mouseenter()
.mouseleave()

为了触发事件，然后使用 .addClass 和 .removeClass 来应用或删除您的 CSS 类。

- Makis

Answer 6

这样使用 JavaScript 怎么样：

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

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

- dsharew

Answer 7

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

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

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

- Harsha Biyani