'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改

https://jsfiddle.net/jlpiedra90/3a7cojgw/4/

查看上面的fiddle以获取实际代码。

我正在尝试创建一个2d画布游戏的基本菜单。我现在对大部分内容都很满意，因为它很适合我的需求。然而，除了更改屏幕所需的"mouseclick"事件外，我认为添加"mousemove"会更清楚地表明，当鼠标悬停在按钮上时，用户实际上是在鼠标悬停在他们可以单击的按钮上。

无论如何，这是我的按钮功能的相关代码：

var Button = function(...) {
    ...        
    I.over = function(event) {
        x = event.offsetX;
        y = event.offsetY;
        if (x >= I.bX && x <= (I.bX+I.bW) && y >= I.bY && y <= (I.bY+I.bH)) {
            $('#canvas').css('cursor','pointer');
        } else {
            $('#canvas').css('cursor','auto');
        };
    };
    I.removePress = function () {
        canv.removeEventListener('mousemove', I.over, false);
        canv.removeEventListener('mousedown', I.pressed, false);
    };
    canv.addEventListener('mousemove', I.over, false);
    canv.addEventListener('mousedown', I.pressed, false);
    return I;
};

当我将每个按钮的"函数"推送到一个数组GUI时，就会添加事件侦听器。奇怪的是，虽然"mousedown"监听器对每个单独的按钮都能正常工作，但"mousemove"监听器只对添加的最后一个按钮工作。因此，将鼠标移到"关于"按钮上会显示更改后的光标；"帮助"或"启动"的情况并非如此。我正在使用jQuery来处理光标的更改。

如果有任何帮助，我们将不胜感激，但请注意，我正在努力从零开始尽可能多地做到这一点。我知道像Easel、Create等库，但我不希望在这个项目中使用它们。非常感谢。