Backbone hover zoom

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<div class="js-hover-zoom-orig-img"><img src="http://farm6.staticflickr.com/5495/10346266225_ae912f0447_m.jpg"></div>

<ul class="my_list">
    <li><a href="#">element 1</a></li>
    <li><a href="#">element 2</a></li>
    <li><a href="#">element 3</a></li>
    <li><a href="#">element 4</a></li>
    <li><a href="#">element 5</a></li>
</ul>

CSS

.js-hover-zoom-orig-img {
    display: block;
}

JavaScript

(function($) {
    HoverView = Backbone.View.extend({
        el: $('body'),

        initialize: function() {
            this.setupZoomContainer();
        },

        events: {
            'mouseenter .js-hover-zoom-orig-img ': 'showZoomContainer',
            'mouseleave .js-hover-zoom-orig-img': 'hideZoomContainer',
            'click .my_list' : 'hideElement'
        },
        
        setupZoomContainer : function() {
            
        },
        
        hideElement : function() {
          $(this).hide();  
        },

        showZoomContainer: function() {
            console.log('showing');
            console.log($(this));
        },

        hideZoomContainer: function() {
            console.log('hiding');
            console.log($(this));
        },
        
        calculateMousePosition: function() {
            
        }

    });

    var hoverView = new HoverView;
})(jQuery);