javascript - jQuery:延迟悬停直到第二次

Question

在我的应用程序中，我有一个“关注”按钮，一旦用户单击另一个“关注”按钮，我就会向用户显示该按钮，就像 Twitter 所做的那样。

我的小问题是，当用户单击关注并显示“关注”按钮时，它会立即更改为“取消关注”，因为这是我附加到它的悬停事件。一些代码来说明:

$('.following').hover(
  function() {
      var $this = $(this);
      $this.val("Unfollow");
  },
  function() {
      var $this = $(this);
      $this.val("Following");
  }
);

这是因为当“跟随”按钮出现时，它最终位于光标后面，从而触发悬停事件。我想要实现的是某种方式来延迟此悬停事件，直到鼠标指针第一次退出按钮然后返回到它。 Twitter 就是这样做的，我认为这是一个出色的 UI 改进。

Answer 1

    $('.follow').click(function(){          
        if($(this).attr("class") == "follow"){
            $(this).one("mouseleave",function(){
                $(this).mouseover(function(){
                    var $this = $(this);
                    $this.html("Unfollow");
                }).mouseout(function(){
                    var $this = $(this);
                    $this.html("Following");
                });
            });
        }else{
            $(this).off('mouseover mouseout');
            $(this).html('follow');
        }
        $(this).toggleClass("follow following");
    });

示例:http://jsfiddle.net/z3t5r3ud/
试试这个。
我更喜欢使用 css，但也许由于某些原因您必须使用 javascript。