jQuery: keine chance zu erkennen, von welcher Seite die Maus trat in ein div ohne "Offset" - Methode?

hier ist die korrekte/funktionierende Beispiel für das Script, einschließlich das Update für die absolut positionierten divs. Danke nochmal für Eure Hilfe turiyag!

jsfiddle: http://jsfiddle.net/MJTkk/2/

Skript:

$(function() {
    $("img").hover(function(e) {
        var el_pos = $(this).offset();
        var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
        log('entered at: '+edge);
    }, function(e) {
        var el_pos = $(this).offset();
        var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
        log('left at: '+edge+'<br><br>');
    });
});

function closestEdge(x,y,w,h) {
        var topEdgeDist = distMetric(x,y,w/2,0);
        var bottomEdgeDist = distMetric(x,y,w/2,h);
        var leftEdgeDist = distMetric(x,y,0,h/2);
        var rightEdgeDist = distMetric(x,y,w,h/2);

        var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
        switch (min) {
            case leftEdgeDist:
                return "left";
            case rightEdgeDist:
                return "right";
            case topEdgeDist:
                return "top";
            case bottomEdgeDist:
                return "bottom";
        }
}

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre>");
}

function distMetric(x,y,x2,y2) {
    var xDiff = x - x2;
    var yDiff = y - y2;
    return (xDiff * xDiff) + (yDiff * yDiff);
}

Hatte ich einige Probleme mit diesem code, wenn Sie auf ein Rechteck, fand ich, dass es falsch identifizieren Sie eine Kante als Recht, wenn sollte es top sein. Ich verbrachte einige Zeit kommen mit einer Antwort und meinte, ich würde zu teilen:

var getDir = function( elem, e ) {       

            /** the width and height of the current div **/
            var w = elem.width();
            var h = elem.height();
            var offset = elem.offset();
            /** calculate the x and y to get an angle to the center of the div from that x and y. **/
            /** gets the x value relative to the center of the DIV and "normalize" it **/
            var x = (e.pageX - offset.left - (w/2)) * ( w > h ? (h/w) : 1 );
            var y = (e.pageY - offset.top  - (h/2)) * ( h > w ? (w/h) : 1 );

            /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
            /** first calculate the angle of the point, 
             add 180 deg to get rid of the negative values
             divide by 90 to get the quadrant
             add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
            var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


            /** do your animations here **/ 
            switch(direction) {
             case 0:
                return 'top';
             break;
             case 1:
                return 'right';
             break;
             case 2:
                   return 'bottom';
             break;
             case 3:
                   return 'left';
             break;
            }

}


$(this).bind('mouseenter',function(e){
    //outputs the direction to the log
    console.log(getDir($(this), e));
});

credit: jQuery animation für ein schweben mit 'Maus Richtung"

Habe ich verbessert @Patrick's Lösung mit jQuery-Funktionen ein, um noch mehr elegante und robuste benutzerdefinierte jQuery-Funktion.

Hier ist die jQuery getMouseSide jsFiddle:

$(function () {
    $('img').hover(function (event) {
        log('entered at: ' + $(this).getMouseSide(event))
    }, function (event) {
        log('left at: ' + $(this).getMouseSide(event) + '<br><br>')
    })

    $.fn.getMouseSide = function (event) {
        function distanceMetric(x, y, x2, y2) {
            return Math.pow(x - x2, 2) + Math.pow(y - y2, 2)
        }

        function closestEdge(x, y, w, h) {
            var edgeDistance = {
                top:        distanceMetric(x, y, w / 2  , 0)
                , bottom:   distanceMetric(x, y, w / 2  , h)
                , left:     distanceMetric(x, y, 0      , h / 2)
                , right:    distanceMetric(x, y, w      , h / 2)
            }
            , edgeDistances = $.map(edgeDistance, function (value) {
                return [value]
            })

            return Object.keys(edgeDistance)[
                $.inArray(
                    Math.min.apply(null, edgeDistances)
                    , edgeDistances
                )
            ]
        }

        var current = $(this)
        , elementOffset = current.offset()

        return closestEdge(
            event.pageX - elementOffset.left
            , event.pageY - elementOffset.top
            , current.width()
            , current.height()
        )
    }
})

function log(message) {
    $('#console').append('<pre>' + message + '</pre>')
}