title: How to add mouseover event in Backbone.js
body: <p>M Trying to give <code>mouseover</code> event in my view of Backbone, here is my view :</p>
  
  <pre><code>Backbone.View.extend({
    template :_.template( '&lt;li class="&lt;% if (refertype=="U"){%&gt;info &lt;% }else{%&gt; access&lt;%}%&gt; main"&gt;&lt;%=refername%&gt;'+
  
              '&lt;/li&gt;'),
    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");
      }
  });
  </code></pre>
  
  <p>But when I am doing mouseover the <code>main</code> class it is not showing <code>hello world</code>, Please suggest what to do? </p>
  
  <p>Tried Heikki Answer but mouseover not working ? </p>
  
  <pre><code>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");
      }
  });
  </code></pre>