Question

我正在尝试像Twitter一样 - 当您点击“关注”按钮时，会在那里添加名为 cancel-hover-style 的课程。当您将光标移出此按钮时，CSS类取消悬停式将被删除。

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

谢谢

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

在处理程序add

中删除特定事件的事件处理程序

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

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

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

其中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/

jQuery + CSS：如何检测第一个＆＃34;移出＆＃34;光标出一个元素？

3 个答案: