如何修改JS代码实现鼠标悬停div左上角四分之一区域时触发函数

要实现仅鼠标悬停在div左上角四分之一区域时触发目标函数，只需要在原有水平位置判断的基础上，新增垂直方向的位置判断即可，两个条件同时满足即为左上角1/4区域。

修改后完整代码如下：

$msg = $("#msg");

$("#photoContainer").on('mousemove', function(e) {
    // 计算鼠标相对于容器的坐标
    const offsetX = e.pageX - this.offsetLeft;
    const offsetY = e.pageY - this.offsetTop;
    // 获取容器宽高
    const containerWidth = $(this).width();
    const containerHeight = $(this).height();
    
    // 同时判断水平在左半区、垂直在上半区，即为左上角1/4区域
    if (offsetX < containerWidth / 2 && offsetY < containerHeight / 2) {
        // 此处替换为你需要触发的目标函数
        $msg.text('已进入左上角区域').css('text-align', 'left');
    } else {
        $msg.text('');
    }
}).on('mouseout', function(){
     $msg.text('');
});

如果需要保留原有的左右半区判断逻辑，只需要在对应的左半区分支里新增垂直方向的判断即可。

内容的提问来源于stack exchange，提问作者Aab B