当鼠标指向div，但并没有指向li时，为什么会出现这种白框？

当鼠标指向div，但并没有指向li时，为什么会出现这种白框？

js代码：

/** Created by sofiaZ on 17/7/22.*/
$(document).ready(function(){     //ready事件，当DOM加载完毕且页面完全加载时发生。把所有jjQuery事件和函数置于该事件比较好。
    var sub =$('#sub');//申明一个变量指向子菜单，这是直接转成

    var activeRow;      //申明一个变量，指向当前激活的以及菜单的行
    var activeMenu;    //二级菜单
                       //没赋初值时为false
  var timer;
    var mouseInsub = false;   //标识当前鼠标是否在子菜单里
    sub.on('mouseenter',function(e){
        mouseInsub = true;
    })
        .on('mouseleave',function(e){
            mouseInsub = false;
        });

    var mouseTrack = [];                       //创建一个数组，跟踪记录鼠标的位置

    var moveHandler = function(e){
        mouseTrack.push({     //push()方法向数组的末尾添加一个或多个元素，返回值为新数组的长度
            x: e.pageX,
            y: e.pageY      //鼠标指针的位置，x相对于文档左边缘，y相对于文档上边缘
        });
        if (mouseTrack.length > 3) {
            mouseTrack.shift();     //shift事件把数组的第一个元素删除，返回第一个元素的值。这里只想要当前以及上一次的坐标，因此保留三个就够了
        }

    };

    $('#test')
        .on('mouseenter',function(e) {   //on事件，向元素添加事件处理程序
            sub.removeClass('none');   //鼠标移动到元素时，出现二级菜单
            $(document).bind('mousemove', moveHandler);
        }
    )
            //document对象对应整个html文档，$(document)是对document的jquery操作，bind为元素添加事件(mousemove常绑定在document事件上)
        .on('mouseleave',function(e) {   //鼠标离开时隐藏
            sub.addClass('none');

            if (activeRow) {    //对于一级菜单容器，存在激活的时候，把样式去掉
                activeRow.removeClass('active');
                activeRow = null
            }
            if (activeMenu) {
                activeMenu.addClass('none');
                activeMenu = null
            }

            $(document).unbind('mousemove',moveHandler);    //当鼠标离开菜单栏时，对mousemove事件进行解绑，以免影响页面其他事件
        })
        .on('mouseenter','li',function(e){
            if (!activeRow){
                activeRow = $(e.target);
                activeRow.addClass('active');
                activeMenu = $('#' + activeRow.data('id'));
                activeMenu.removeClass('none');
                return;
            }

            if (timer) {

                clearTimeout(timer);
            }    //当事件还没触发时，清掉计时器，这样可以保证事件只触发最后一次的？（debounce去抖技术基本原理？)

            var currMousePos = mouseTrack[mouseTrack.length - 1];   //当前鼠标坐标
            var leftCorner = mouseTrack[mouseTrack.length - 2];    //上一次鼠标坐标

            var delay = needDelay(sub, leftCorner, currMousePos);

            if (delay) {

                timer = setTimeout(function(){     //setTimeout返回值是一个ID？
                if (mouseInsub) {
                    return;
                }

                activeRow.removeClass('active');
                activeMenu.addClass('none');

                activeRow = $(e.target);
                activeRow.addClass('active');
                activeMenu = $('#' + activeRow.data('id'));
                activeMenu.removeClass('none');          //大概就是，移到下一个li时，跳过if，重新获取target与id？？
                timer = null;       //这样的话，返回什么呢？？                   // 因为active是全局变量？？？？

            },300);     //300毫秒后执行，这样当鼠标从一级菜单转换到二级菜单时，中间划过其他li也不会触动其对应的二级菜单，因为有延迟

            }

            else {
                var prevActiveRow = activeRow;
                var prevActiveMenu = activeMenu;

                activeRow = $(e.target);
                activeMenu = $('#' + activeRow.data('id'));

                prevActiveRow.removeClass('active');
                prevActiveMenu.addClass('none');

                activeRow.addClass('active');
                activeMenu.removeClass('none')


            }

            })
});

函数的js代码：

/**
 * Created by sofiaZ on 17/7/27.
 */
function sameSign(a, b) {
    return(a ^ b) >=0;     //a^b为a按位异或b，若结果为正（最高位为0），则a和b要么同正要么同负）
}

function vector(a,b){
    return{
        x: b.x- a.x,
        y: b.y- a.x

    }
}
function vectorProduct(v1,v2){
    return v1.x * v2.y - v2.x* v1.y
}

function isPointInTrangle(p,a,b,c) {    //叉乘判断
    var pa = vector(p, a);
    var pb = vector(p, b);
    var pc = vector(p, c);

    var t1 = vectorProduct(pa, pb);
    var t2 = vectorProduct(pb, pc);
    var t3 = vectorProduct(pc, pa);    //叉乘结果

    return sameSign(t1, t2) && sameSign(t2, t3)
}

function needDelay(elem, leftCorner, currMousePos) {
    var offset = elem.offset();   //返回被选元素相对于文档的偏移坐标

    var topLeft = {     //二级菜单上边缘坐标
        x: offset.left,
        y: offset.top
    };

    var bottomLeft = {     //二级菜单下边缘坐标
      x: offset.left,
        y: offset + elem.height()
    };

    return isPointInTrangle(currMousePos, leftCorner, topLeft, bottomLeft)