骨干事件

Question

您好，我想知道如何使用

当前的

events: {
  "hover .info"   : "hover"
},

hover:(e) =>
  $(e.currentTarget).css("background-color", "#333")

主干和 js 处理删除悬停状态，我想知道如何处理将鼠标从带有 class .info 的元素移开的事件

如果我在里面执行标准咖啡脚本来执行此操作在悬停：事件处理程序中，需要悬停 2 次才能工作。

我基本上想模仿

$(".info").hover(
    function() {
       $(this).css("background-color", "#333")
    },
    function() {
       $(this).css("background-color", "#F3F")
    },
});

谢谢

Answer 1

来自 jQuery 文档：

调用 $(selector).hover(handlerIn, handlerOut) 是以下简写：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

所以我认为最好用 Backbone 处理这个问题的方法只是设置两个事件（抱歉，我不相信 CoffeeScript）：

events: {
  "mouseenter .info"   : "hoverOn",
  "mouseleave .info"   : "hoverOff"
},

hoverOn: function(e) { ... },
hoverOff: function(e) { ... }

或者，您可以使用 单参数语法，它接受一个函数并在输入和输出上调用它 - 这与 .toggle( 配合使用效果很好) 和 toggleClass()。

Answer 2

有一个版本的 hover() 需要一个回调函数 ：

描述：将单个处理程序绑定到匹配的元素，当鼠标指针进入或离开元素时执行。

这是 Backbone 将使用的 hover 版本。因此，您可以使用 toggleClass 和几个 CSS 类来处理此问题，而不是直接使用搞乱css：默认

hover:(e) =>
  $(e.currentTarget).toggleClass('dark-gray')

情况下，将在元素上设置默认的#F3F颜色，并且您将：

.dark-gray {
  background-color: #333
}

在样式表中。如果由于某种原因无法使用 toggleClass，则必须分别绑定到 mouseenter 和 mouseleave。

Answer 3

然而，在这个精确的示例中，您确实应该使用 css :hover 伪类 而不是 jquery 。

Answer 4

如果它不是操作链接，那么您可以遵循 css ： pointer-events:none