backbone.js hover on root dom doesn't work

Why the hover event bind on the root dom doesn't work? Though by default, i can put the <div class="activity span"></div> around the template and with a wrapper <div></div> outside, but it sucks.

Please help~ thx

ActivityView = Backbone.View.extend(
    className: "activity span"
    events: {
        "hover" : "toggleSidebarTrigger"   // doesn't work..
        "hover img" : "foo"                // works
        "click" : "bar"                    // works
    }
    template: _.template($("#activity-item-template").html())
    initialize: ->
        this.model.bind("change", this.render, this)
        this.render()
    render: ->
        $(this.el).html(this.template(this.model.toJSON()))
    toggleSidebarTrigger: ->
        this.$(".sidebar-trigger").toggle()

)


  <script id="activity-item-template" type="text/template开发者_C百科">
      <img src="{{ photo.url_m }}" class="activity-media" alt="" />
      <a href="#toggle-sidebar" class="sidebar-trigger"><%= image_tag "plus_69x69.png" %></a>
  </script>

ActivityView = Backbone.View.extend(
    className: "activity span"
    events: {
        "hover" : "toggleSidebarTrigger"   // doesn't work..
        "hover img" : "foo"                // works
        "click" : "bar"                    // works
    }
    template: _.template($("#activity-item-template").html())
    initialize: ->
        this.model.bind("change", this.render, this)
        this.render()
    render: ->
        $(this.el).html(this.template(this.model.toJSON()))
    toggleSidebarTrigger: ->
        $(".sidebar-trigger", this.el).toggle()

)

try this one..