On the mouseenter, add a class corresponding to the axis which the mouse enter (jQuery)

gistfile1.js

/**
 * On the mouseenter, add a class corresponding to the axis which the mouse enter
 *    top-left | top    |    top-right
 *        left |        |        right
 * bottom-left | bottom | bottom-right
 */
var $container = $('div')
  , width = $container.width() / 3
  , height = $container.height() / 3
  , className, x, y

$container
.on('mouseenter', function(e) {
    className = ''
    x = e.pageX - this.offsetLeft
    y = e.pageY - this.offsetTop

    // Height
    if (y <= width) {
        className = 'top'
    } else if (y > width * 2) {
        className = 'bottom'
    }
    // Width
    if (x <= width) {
        className += !className ? '' : '-'
        className += 'left'
    }
    if (x > width * 2) {
        className += !className ? '' : '-'
        className += 'right'
    }

    $container.addClass(className)
}).on('mouseleave', function() {
    $container.removeClass(className)
})