Javascript 自定义光标-悬停时增长

我有一个自定义光标，我正试图在链接悬停上设置动画。 我希望外部光标环在链接悬停时按比例增长

我尝试调用这个函数，但是它不起作用，光标从文档中消失

function growOnHover() {
link.addEventListener("mouseover", function() {
   TweenMax.to(outerCursor, 1, {scale: 2})
});

growOnHover();

有没有人对我做错了什么或如何正确工作有什么建议

//设置光标在屏幕外的起始位置
变量clientX=-300，
clientY=-300，
//元素
outerCursor=document.querySelector（“.cursor--outer”），
innerCursor=document.querySelector（“.cursor--inner”），
link=document.querySelector（“.link”）
var initCursor=function（）{
//添加侦听器以跟踪当前鼠标位置
文档.添加的事件列表器（“mousemove”，函数（e）{
clientX=e.clientX
clientY=e.clientY
});
var render=function（）{
TweenMax.套件（外部断路器、{
x:clientX，
y:clientY，
延迟：.08，
ease:Power1.easeOut
});
TweenMax.set（内部光标{
x:clientX，
y:clientY
});
请求动画帧（渲染）；
};
请求动画帧（渲染）；
};
initCursor（）
正文{
背景色：#ffff；
宽度：100%；
高度：100vh；
填充：0；
保证金：0；
光标：无；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*外光标圆*/
.cursor--外部{
宽度：24px；
高度：24px；
边界半径：50%；
边框：1px实心#2323；
显示器：flex；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
位置：固定；
左：0；
排名：0；
指针事件：无；
}
/*内光标圆*/
.游标-内部{
宽度：4px；
高度：4px；
位置：固定；
左：10px；
顶部：10px；
边界半径：50%；
z指数：11000；
背景:#2323；
}
/*谷歌链接*/
.链接{
光标：无；
填充：30px；
过渡：不透明度1s；
}
.link:悬停{
不透明度：.2；
}


尝试使用JQuery库
，然后尝试下面的代码

你的JS坏了。修复错误，它就可以正常工作：


//设置光标在屏幕外的起始位置
变量clientX=-300，
clientY=-300，
//元素
outerCursor=document.querySelector（“.cursor--outer”），
innerCursor=document.querySelector（“.cursor--inner”），
link=document.querySelector（“.link”）
var initCursor=function（）{
//添加侦听器以跟踪当前鼠标位置
文档.添加的事件列表器（“mousemove”，函数（e）{
clientX=e.clientX
clientY=e.clientY
});
var render=function（）{
TweenMax.套件（外部断路器、{
x:clientX，
y:clientY，
延迟：.08，
ease:Power1.easeOut
});
TweenMax.set（内部光标{
x:clientX，
y:clientY
});
请求动画帧（渲染）；
};
请求动画帧（渲染）；
};
initCursor（）；
函数grownhover（）{
addEventListener（“mouseenter”，function（））{
TweenMax.to（外圆，1，{比例：2}）
});
addEventListener（“mouseleave”，function（））{
TweenMax.to（外部循环器，1，{scale:1}）
});
}
grownhover（）
正文{
背景色：#ffff；
宽度：100%；
高度：100vh；
填充：0；
保证金：0；
光标：无；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*外光标圆*/
.cursor--外部{
宽度：24px；
高度：24px；
边界半径：50%；
边框：1px实心#2323；
显示器：flex；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
位置：固定；
左：0；
排名：0；
指针事件：无；
}
/*内光标圆*/
.游标-内部{
宽度：4px；
高度：4px；
位置：固定；
左：10px；
顶部：10px；
边界半径：50%；
z指数：11000；
背景:#2323；
}
/*谷歌链接*/
.链接{
光标：无；
填充：30px；
过渡：不透明度1s；
}
.link:悬停{
不透明度：.2；
}
完全没有理由为此加载jQuery。您可以在vanilla JS中做完全相同的事情，而不会出现问题。
$(".link").hover(function() {
   $('.cursor--outer').css({'transform':'scale(1.5)'})
}, function() {
   $('.cursor--outer').css({'transform':'scale(1)'})
})