div-鼠标移动-向左、向右、向上、向下？（javascript）

鼠标在不同方向的移动是否可能触发不同的动作

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

有类似于onmouseinter、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+"");
        });
    });

（函数（$）{
var选项={}；
var-oldx=0；
var-oldy=0；
var方向=”；
$.mousedirection=函数（opts）{
var默认值={
};
选项=$.extend（默认值，选项）；
$（文档）.bind（“mousemove”，函数（e）{
var activeElement=e.target | | e.srceelement；
如果（e.pageX>oldx&&e.pageY>oldy）{
方向=“右下”；
}
else if（e.pageX>oldx&&e.pageYoldy）{
方向=“左下”；
}
else if（e.pageX>oldx&&e.pageY==oldy）{
direction=“right”；
}
else if（e.pageX==oldx&&e.pageY>oldy）{
方向=“向下”；
}
else if（e.pageX==oldx&&e.pageY

这是一个完美的功能（请参见此处的操作：），但我不知道如何实现更改div背景颜色-它当前会更改显示的文本（左、右等），我不需要任何文本，我需要bg颜色

有人可以编辑此代码来实现这一点吗？我自己试过了，但没能成功

---

edit2-通过使3

插件看起来像你想要的。

插件看起来像你想要的。

使用mousemove事件中的坐标来计算方向。以下是当前代码：我需要背景色而不是文本。我试着自己编辑代码，但我无法让它工作。你知道如何实现这一点吗？使用mousemove事件中的坐标计算方向。以下是当前代码：我需要背景颜色而不是文本。我试着自己编辑代码，但我无法让它工作。你知道如何做到这一点吗？这非常有效！但是我需要显示背景色，而不是文本。我试着自己编辑代码，但我无法让它工作。下面是当前显示文本的代码：你能帮我吗？你需要做的就是为每个方向设置if语句，并适当地更改css。请看我根据您的代码修改的javascript的底部。非常感谢。现在唯一要做的就是让每个div单独工作（我有很多div）。现在，使用class=“container”（）在一个div上移动鼠标会在所有其他div上触发此事件。您可以将此设置为适用于100个不同的类或id（container1-100）吗？您应该在div上使用id，而不是使用id选择器。或者，如果您希望对所有div执行相同的操作（只需分别执行），则可以使用

$（this）

。还有一个问题-如何使鼠标移动时得到的第一种颜色保持不变？我试着将onmouseleave=“this.mousedirection='null'；”放在上面，但它的行为有点奇怪，并且会影响同一类的每个div。这非常有效！但是我需要显示背景色，而不是文本。我试着自己编辑代码，但我无法让它工作。下面是当前显示文本的代码：你能帮我吗？你需要做的就是为每个方向设置if语句，并适当地更改css。请看我根据您的代码修改的javascript的底部。非常感谢。现在唯一要做的就是让每个div单独工作（我有很多div）。现在，使用class=“container”（）在一个div上移动鼠标会在所有其他div上触发此事件。您可以将此设置为适用于100个不同的类或id（container1-100）吗？您应该在div上使用id，而不是使用id选择器。或者，如果您希望对所有div执行相同的操作（只需分别执行），则可以使用

$（this）

。还有一个问题-如何使鼠标移动时得到的第一种颜色保持不变？我尝试将onmouseleave=“this.mousedirection='null'；”放在上面，但它的行为有点奇怪，并且影响到同一类的每个div。