javascript - 根据鼠标位置添加 Css 类

Question

我试图根据鼠标位置向一组 div 添加一个类，最终结果将是一堵墙的人看着光标...

我已经写了一些我认为应该可行的东西，我可以访问 addClass，但它有很多错误，似乎只添加一次类，而不是不断检查鼠标位置。谁能看出我哪里出错了？

this.setImageDirection = function(){
    if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY <= this.imageTop){
        $(this).removeClass();
        $(this).addClass("up");
    } else if(mouseX < this.imageLeft && mouseY < this.imageTop){
      $(this).removeClass();
       $("."+this.className+">.head-image").addClass("up-left");
    } else if(mouseX <= this.imageLeft && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        $(this).removeClass();
       $(this).addClass("left");
    } else if(mouseX < this.imageLeft && mouseY > this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down-left");
    } else if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY >= this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down");
    } else if(mouseX > this.imageRight && mouseY > this.imageBottom){
        $(this).removeClass();
        $(this).addClass("down-right");
    } else if(mouseX >= this.imageRight && mouseY >= this.imageTop && mouseY <= this.imageBottom){
        $(this).removeClass();
        $(this).addClass("right");
    } else (mouseX > this.imageRight && mouseY < this.imageTop){
        $(this).removeClass();
        $(this).addClass("up-right");
    } 
};

工作演示

https://jsfiddle.net/cppsh7y9/

Answer 1

您的代码无效。看到这一行:

} else (mouseX > this.imageRight && mouseY < this.imageTop){

应该是:

} else if(mouseX > this.imageRight && mouseY < this.imageTop){