类似推特的关注按钮，悬停动作[重复]答案

【问题标题】：twitter-like follow button, hover action [duplicate]类似推特的关注按钮，悬停动作[重复]
【发布时间】：2012-01-16 11:13:54
【问题描述】：

可能重复：
How could someone replicate the Follow/Unfollow hover action on Twitter's website using Twitter Bootstrap?

我正在创建一个类似 Twitter 的关注按钮。代码在http://jsfiddle.net/RQSsz/9/。

<button type="submit" value="" class="btn follow following " title="In bookmarks">
    <i class="bookmarked"></i><span>In bookmarks</span>
</button>
<button type="submit" value="" class="btn follow unfollow displaynone" title="From bookmarks">
    <i class="unfollow"></i><span>From bookmarks</span>
</button>

$('.btn.follow.following').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    } else {
        $(".btn.follow.following").toggleClass("displaynone");
        $(".btn.follow.unfollow").toggleClass("displaynone");
    }
});

我遇到了按钮闪烁的问题。做错了什么？

【问题讨论】：

完成。感谢您澄清已接受的答案！
没问题，很高兴它帮助您了解它的好处。

标签： jquery hover

【解决方案1】：

按钮的隐藏触发悬停事件，导致按钮隐藏，触发悬停事件等等等等。

首先，您的选择器是无稽之谈。您想同时选择两个按钮：

$('.follow, unfollow')

其次，为什么要切换课程？这意味着您依赖于初始状态。只需使用show() / hide() 方法即可：

$(".btn.follow.following").hide();
$(".btn.follow.unfollow").show();

和

$(".btn.follow.following").show();
$(".btn.follow.unfollow").hide();

我已经修改了你的演示，它现在应该可以工作了。

http://jsfiddle.net/mGGae/1/

【讨论】：

【解决方案2】：

类似这样的：


$('.btn.follow.following').live({
    mouseover : function(event) {
        $(this).hide();
        $(".btn.follow.unfollow").show();
    }
    mouseout: function(event) {
        $(".btn.follow.unfollow").hide();
        $(this).show();        
    }
});

【讨论】：

【解决方案3】：

$("button.follow").hover(
 function () {
  $(this).html($("<i class='bookmarked'></i><span>From bookmarks</span>"));
 }, 
 function () {
  $(this).html("<i class='bookmarked'></i><span>IN boomarks</span>");
 }
);

【讨论】：

【解决方案4】：

我也有同样的问题，但我想通过检查 Twitter.com 上以下按钮的元素，我想出了一点。它可以在纯 CSS 中完成，例如：

<div class="follow-button-combo is-following">
  <a href="xxxx" class="btn">
    <div class="is-following">Following</div>
    <div class="to-follow">Follow</div>
    <div class="to-unfollow">Unfollow</div>
  </a>
</div>

按钮将同时包含 3 个不同的操作文本。我们可以根据条件使用 CSS 隐藏其中的 2 个：

在 SCSS 中：

/* in SCSS file */
.follow-button-combo {
  /* Following, make the combo's class = "is-following"
     so only the "Following" text is shown */
  &.is-following {
    .btn {@extend .btn-success;}
    .is-following {display:block;}
    .to-follow {display:none;}
    .to-unfollow {display:none;}
    /* when hover, only the "Unfollow" text is shown */
    &:hover {
      .btn{@extend .btn-danger;} /* the button color changes to red */
      .is-following {display:none;}
      .to-follow {display:none;}
      .to-unfollow {display:block;} } 
  }

  /* Not following, make the combo's class = "not-following"
     so only the "Follow" text is shown */
  &.not-following {     
    .is-following {display:none;}
    .to-follow {display:block;}
    .to-unfollow {display:none;}    
    /* when hover, nothing changes */
  }
}

【讨论】：