Question

Hi I was wondering how I handle the remove hover state using backbone and js

currently I have

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

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

I was wondering how I would handle the event where i move my mouse away from the element with class .info

If i do standard coffee script inside to do this inside the hover: event handler it requires 2 hovers for it to work.

I basically want to imitate

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

Thanks

Answer 1

There is a version of hover() that takes one callback function:

Description: Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.

This is the version of hover that will get used by Backbone. So you could handle this with toggleClass and a couple CSS classes instead of directly messing around with the css:

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

The default #F3F color would be set on the element by default and you’d have:

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

in your stylesheets. If you cannot for some reason use toggleClass, you’d have to bind to mouseenter and mouseleave individually.