Как добавить событие mouseover в Backbone.js

M Попытка дать событие mouseover на мой взгляд на Backbone, вот мое мнение:

Backbone.View.extend({
  template :_.template( '<li class="<% if (refertype=="U"){%>info <% }else{%> access<%}%> main"><%=refername%>'+

            '</li>'),
  initialize: function() {
    _.bindAll(this, 'render', 'close');
    this.model.bind('change', this.render);
    this.model.view = this;
  },
    events: {
        "mouseover .main": "mouseovercard"
    },
  // Re-render the contents of the Card item.
  render: function() {
    this.el=this.template(this.model.toJSON());
    $(".cards-list").append(this.el);
  },
    mouseovercard: function() {
        console.log("hello world");
    }
});

Но когда я делаю mouseover класс main, он не показывает hello world, пожалуйста, предложите, что делать?

Пробовал Хейкки Ответ, но мышь не работает?

App.Backbone.CardView = Backbone.View.extend({
    tagName: 'li',
    className: 'main',
  initialize: function() {
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
    this.model.view = this;
  },
    events:{
        "mouseover .main": "mouseovercard"
    },
  // Re-render the contents of the Card item.
  render: function() {
         $(this.el)
            .removeClass('info access')
            .addClass(this.model.get('refertype') == 'U' ? 'info' : 'access')
            .text(this.model.get('refername'));
    $(".cards-list").append(this.el);
  },
    mouseovercard: function() {
        console.log("hello world");
    }
});