jQuery + CSS：如何检测元素中游标的第一"move out"？

Question

我试图做同样的Twitter -当你点击Follow按钮，然后添加那里的类称为取消悬停样式。当您将光标移出此按钮时，CSS类cancel-hover-style将被删除。

如何检测这种"先移出去"?

谢谢

Answer 1

不要使用on/off。jQuery有一个内置的解决方案。

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

您可以使用它来侦听第一个(且仅是第一个)mouseout事件，并删除您感兴趣的任何CSS类。

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

Answer 2

试试这个:

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/

Answer 3

使用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");

和控制进程的特定部分，使每个部分具有不同的处理程序函数，然后可以使用

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

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

根据这里的另一个答案提供的信息，我同意我的例子可以通过使用。one()而不是。on()来简化这个特殊情况。事实上，一个完全符合要求的