骨干事件

Question

嗨,我想知道如何使用backbone和js处理删除悬停状态

目前我有

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

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

我想知道如何处理事件,我将鼠标从类.info上移开元素

如果我在hover:event处理程序里面做标准咖啡脚本,它需要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()需要一个回调函数:

描述:将单个处理程序绑定到匹配的元素,以便在鼠标指针进入或离开元素时执行.

这是hoverBackbone将使用的版本.所以你可以使用toggleClass和几个CSS类来处理这个,而不是直接搞乱css:

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

默认情况下,默认#F3F颜色将在元素上设置,您将拥有:

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

在你的样式表中.如果你因为某些原因使用toggleClass,你必须结合mouseenter和mouseleave个别.

Answer 3

但是,在这个精确的例子中,您应该使用css:hover伪类而不是jquery.