Javascript 混合混合模式不'；不能在自定义游标上工作

我想在内部光标中添加一个

混合模式：difference

，但我无法让它工作。我听说应用于光标的

位置：fixed

可能会导致这里的问题。但我无法删除该属性，因为向下滚动时需要跟随光标。有人知道如何解决这个问题吗？先谢谢你

类演示{
构造函数（）{
this.initCursor（）；
this.inithover（）；
}
initCursor（）{
const{Back}=窗口；
this.outerCursor=document.querySelector（“.circle cursor outer”）；
this.innerCursor=document.querySelector（“.circle cursor-inner”）；
this.outerCursorBox=this.outerCursor.getBoundingClientRect（）；
此.outerCursorSpeed=0；
this.easing=Back.easeOut.config（1.7）；
this.clientX=-100；
this.clientY=-100；
this.showCursor=false；
常量游标=（）=>{
TweenMax.set（此.innerCursor{
x:这个，clientX，
y:这个，克利提
});
TweenMax.set（此.outerCursor{
x:this.clientX-this.outerCursorBox.width/2，
y:this.clientY-this.outerCursorBox.height/2
});
设置超时（（）=>{
该速度为0.2；
}, 100);
this.showCursor=true；
};
文件。添加的文件列表器（“鼠标移动”，光标）；
document.addEventListener（“mousemove”，e=>{
this.clientX=e.clientX；
this.clientY=e.clientY；
});
常量渲染=（）=>{
TweenMax.set（此.innerCursor{
轮换：90，
x:这个，clientX，
y:这个，克利提
});
如果（！this.isStuck）{
TweenMax.至（this.outerCursor，this.outerCursorSpeed{
x:this.clientX-this.outerCursorBox.width/2，
y:this.clientY-this.outerCursorBox.height/2
});
}
if（this.showCursor）{
document.removeEventListener（“mousemove”，鼠标指针）；
}
请求动画帧（渲染）；
};
请求动画帧（渲染）；
}
initHovers（）{
常量HandleMouseCenter=e=>{
this.isStuck=true；
常数目标=e.currentTarget；
const box=target.getBoundingClientRect（）；
this.outerCursorOriginals={
宽度：this.outerCursorBox.width，
高度：this.outerCursorBox.height
};
TweenMax.to（this.innerCursor，0.2{
x:box.left，
y:机顶盒，
宽度：box.width，
高度：box.height，
不透明度：0.4，
});
};
const handleMouseLeave=（）=>{
this.isStuck=false；
TweenMax.to（this.innerCursor，0.2{
宽度：this.outerCursorOriginals.width，
高度：this.outerCursorOriginals.height，
不透明度：0.2，
});
};
const mainNavHoverTween=TweenMax.to（this.innerCursor，0.3{
放松：这个，放松，
是的，
不透明度：1，
宽度：70，
身高：70，
左：-35，
前-35
});
常量mainNavMouseEnter=（）=>{
此.outerCursorSpeed=0；
TweenMax.set（this.innerCursor，{opacity:1}）；
mainnaverween.play（）；
};
常量mainnavouseleave=（）=>{
该速度为0.2；
TweenMax.set（this.innerCursor，{opacity:1}）；
mainNavHoverTween.reverse（）；
};
const mainNavLinks=document.queryselectoral（“a”）；
mainNavLinks.forEach（项目=>{
项目.添加的列表器（“鼠标指针”，mainNavMouseEnter）；
项目.增补的列表（“mouseleave”，Main-NavMouseleave）；
});
}
}
const demo=new demo（）
正文{
高度：500vh；
}
a{
颜色：黑色；
}
.圆圈光标{
位置：固定；
左：0；
排名：0；
指针事件：无；
边界半径：100%；
}
.圆形光标外部徽章{
不透明度：0.5；
过渡：所有500ms都放松；
}
.内圆光标{
宽度：22.5px；
身高：22.5px；
左：-11.25px；
顶部：-11.25px；
z指数：11000；
混合模式：差异化；
背景色：黑色；
}
只需将
背景：白色
设置为
主体
和
。将光标内圆
：


类演示{
构造函数（）{
this.initCursor（）；
this.inithover（）；
}
initCursor（）{
const{Back}=窗口；
this.outerCursor=document.querySelector（“.circle cursor outer”）；
this.innerCursor=document.querySelector（“.circle cursor-inner”）；
this.outerCursorBox=this.outerCursor.getBoundingClientRect（）；
此.outerCursorSpeed=0；
this.easing=Back.easeOut.config（1.7）；
this.clientX=-100；
this.clientY=-100；
this.showCursor=false；
常量游标=（）=>{
TweenMax.set（此.innerCursor{
x:这个，clientX，
y:这个，克利提
});
TweenMax.set（此.outerCursor{
x:this.clientX-this.outerCursorBox.width/2，
y:this.clientY-this.outerCursorBox.height/2
});
设置超时（（）=>{
该速度为0.2；
}, 100);
this.showCursor=true；
};
文件。添加的文件列表器（“鼠标移动”，光标）；
document.addEventListener（“mousemove”，e=>{
this.clientX=e.clientX；
this.clientY=e.clientY；
});
常量渲染=（）=>{
TweenMax.set（此.innerCursor{
轮换：90，
x:这个，clientX，
y:这个，克利提
});
如果（！this.isStuck）{
TweenMax.至（this.outerCursor，this.outerCursorSpeed{
x:this.clientX-this.outerCursorBox.width/2，
y:this.clientY-this.outerCursorBox.height/2
});
}
if（this.showCursor）{
document.removeEventListener（“mousemove”，鼠标指针）；
}
请求动画帧（渲染）；
};
请求动画帧（渲染）；
}
initHovers（）{
常量HandleMouseCenter=e=>{
this.isStuck=true；
常数目标=e.currentTarget；
const box=target.getBoundingClientRect（）；
这是我的名字