div - 鼠标移动 - 向左，向右，向上，向下？ （JavaScript的）

Question

鼠标在不同方向的移动是否可能引发不同的行为？

例如，如果我将鼠标移到div左侧，则div背景颜色会变为红色。向右移动 - 蓝色bg，向上 - 绿色，向下 - 黑色。

是否有类似这样的事件 - 事件类似于onmouseenter，onmouseleave，onmousemove ......？

或者有人可以为此写一个函数吗？

修改

(function ($) {
    var options = {};
    var oldx = 0;
    var oldy = 0;
    var direction="";
    $.mousedirection = function (opts) {
        var defaults = {
        };
        options = $.extend(defaults, opts);
        $(document).bind("mousemove", function (e) {
            var activeElement = e.target || e.srcElement;
            if (e.pageX > oldx && e.pageY > oldy) {
                direction="bottom-right";
            }
            else if (e.pageX > oldx && e.pageY < oldy) {
                direction="top-right";
            }
            else if (e.pageX < oldx && e.pageY < oldy) {
                direction="top-left";
            }
            else if (e.pageX < oldx && e.pageY > oldy) {
                direction="bottom-left";
            }
            else if (e.pageX > oldx && e.pageY == oldy) {
                direction="right";
            }
            else if (e.pageX == oldx && e.pageY > oldy) {
                direction="down";
            }
            else if (e.pageX == oldx && e.pageY < oldy) {
                direction="up";
            }
            else if (e.pageX < oldx && e.pageY == oldy) {
                direction="left";
            }
            $(activeElement).trigger(direction);
            $(activeElement).trigger({type:"mousedirection",direction:direction});
            oldx=e.pageX;
            oldy=e.pageY;
        });
    }
})(jQuery)

$(function () {
        $.mousedirection();
        $(".container").bind("mousedirection", function (e) {
            $(this).html(""+e.direction+"");
        });
    });

这是完美运作的功能（在此处查看它：http://jsfiddle.net/Dv29e/100/），但我不知道如何实现更改div背景颜色 - 它当前更改显示的文本（左，右，等...）我不需要任何文字，我需要bg颜色。

有人可以编辑此代码来实现此目的吗？我自己尝试了，但我无法让它发挥作用。

edit2 - 通过make3

解决

Answer 1

This插件看起来就像你想要的那样。