jQuery + CSS：如何检测光标从元素中的第一个“移出”？

Question

我尝试做与Twitter相同的操作-单击“关注”按钮时，然后在其中添加了名为cancel-hover-style的类 。 当您将光标移出该按钮时，CSS类cancel-hover-style将被删除。

如何检测到这种“先搬出去”？

谢谢

Answer 1

不要使用on / off 。 jQuery为此提供了一个内置解决方案。

使用jQuery.one 。 它只会执行一次处理程序。

您可以使用它侦听第一个（也是第一个） mouseout事件，并删除想要删除的所有CSS类。

elem.one("mouseout",  function() { $(this).removeClass("hoverClass"); })

Answer 2

使用jquery，这些可能是完成此操作所需的所有事件，并且当然已修改为您的特定逻辑要求。

elem.on("mouseover", function() { $(this).addClass("hoverClass"); });
elem.on("mouseout",  function() { $(this).removeClass("hoverClass"); })
elem.on("mousedown", function() { $(this).addClass("clickClass"); });
elem.on("mouseup",   function() { $(this).removeClass("clickClass"); })

删除特定事件的事件处理程序，在处理程序中添加

$(this).off("eventName");

并控制过程的特定部分，使每个Peice具有不同的处理函数，然后您就可以使用

$(this).off("eventName"[, selector, handler]);

选择器和处理程序都是可选参数。

更新

根据此处另一个答案提供的信息，我同意可以通过使用.one（）而不是.on（）来针对这种特定情况简化我的示例。 实际上，完全符合要求

Answer 3

尝试这个：

HTML：

<a href="">Follow</a>

CSS：

a {background: #298be6; color: #fff; display: inline-block; font-family: Helvetica; padding: 5px 20px; text-decoration: none;}

.cancel {background: #e64242;}

jQuery的：

$('a').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('cancel').text('Unfollow');
}).on('mouseleave', function() {
  $(this).removeClass('cancel').text('Follow');
});

JSFiddle： http : //jsfiddle.net/c3UYD/