判断鼠标进入方式的思路
1.将元素想象为坐标系，划分x轴和y轴，主要y轴正方向向下
2.根据下面的图可以看出来，判断是否从右面进入的只需要判读进入的位置的角度是否在A角度之内，同时根据三角函数计算公式
对边比邻边可以得出A的角度
let div = document.querySelector('.direction');//获取容器
let content = document.querySelector('.content')
let rect = div.getBoundingClientRect();//返回容器大小以及距离视口距离的位置信息
let theta = Math.atan2(rect.height, rect.width);//反正切
atans的描述
3.计算出鼠标进入位置的信息
const w = e.offsetX - rect.width / 2; //获取进入位置的X值
const h = rect.height / 2 - e.offsetY;//获取进入位置的y值
const angle = Math.atan2(h, w);
4.根据鼠标进入位置的角度判断鼠标是在那个方向进入的
// 从左上方进入 angle < theta ;从左下方进入angle >= -theata
if (angle < theta && angle >= -theta) {
console.log('right');
content.innerHTML = 'right'
content.className = 'right content'
} else if (angle < - theta && angle >= -Math.PI + theta) {
console.log('bottom');
content.innerHTML = 'bottom'
content.className = 'bottom content'
} else if (angle < Math.PI - theta && angle >= theta) {
console.log('top');
content.innerHTML = 'top'
content.className = 'top content'
} else {
console.log('left');
content.innerHTML = 'left'
content.className = 'left content'
}
