Javascript 悬停时更改背景或颜色

当光标位于黑色div上时，是否有一种简单的方法可以更改颜色或背景色，并在白色“光标区域”中显示它们

我知道，如果您在悬停时更改黑色div的颜色和z-index是可能的，但是有没有办法通过白色光标进行更改-这样我就不必修改光标上方要显示的每个div

编辑：我创建了一个新的代码笔网站。所以我希望当白色光标在“Hello”文本上时，它变为黑色。黑色的“hello”-文本应显示在白色区域中

//光标已修改
var cursor=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，函数（e）{
e、 停止传播（）；
var x=e.clientX；
变量y=e.clientY；
cursor.style.left=x+'px'；
cursor.style.top=y+'px'；
});
//光标悬停已修改-悬停图元时
var cursor=document.getElementById（'cursor'）；
var clickableCursor=document.getElementsByClassName（'clickableCursor'）；
对于（变量i=0；i{
cursor.style.height=“80px”；
cursor.style.width=“80px”；
cursor.style.animation=“cursorAnimation 5s linear infinite”；
cursor.style.background=“白色”；
});
clickableCursor[i]。addEventListener（'mouseout'，（）=>{
cursor.style.height=“40px”；
cursor.style.width=“40px”；
cursor.style.animation=“无”；
cursor.style.border=“2px纯白”；
cursor.style.background=“无”；
});
}

正文{
光标：无；
}
.集装箱{
高度：3000px；
宽度：100%；
位置：相对位置；
背景：橙色；
}
#光标{
背面可见性：隐藏；
z指数：100000000；
位置：固定；
宽度：40px；
高度：40px；
边框：2倍纯白；
转换：.1s；
边界半径：50%；
指针事件：无；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡时间：100ms；
过渡定时功能：缓解；
}
#游标：：之前{
内容：''；
位置：绝对位置；
高度：7px；
宽度：7px；
边界半径：100%；
背景色：白色；
}
.可点击光标{
字体大小：50px；
颜色：白色；
位置：固定；
背景：黑色；
填充：50px
}
.一{
顶部：50px；
左：50px；
}
.二{
顶部：50px；
右：50px；
}

您好

更新到更新的问题

将

替换为

div

，放入

然后用

包装文本，并制作css

.text:hover {
  color: black;
  z-index: 1000000001; /*higher that #cursor's*/
  position: relative; /*this is neede to z-index work*/
}

另外，如果将

替换为

，则从

中去掉
填充物
。单击可点击光标
，并将其置于
。文本
，即现在的
，结果会更好。在代码段中查找


//光标已修改
var cursor=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，函数（e）{
e、 停止传播（）；
var x=e.clientX；
变量y=e.clientY；
cursor.style.left=x+'px'；
cursor.style.top=y+'px'；
});
//光标悬停已修改-悬停图元时
var cursor=document.getElementById（'cursor'）；
var clickableCursor=document.getElementsByClassName（'clickableCursor'）；
对于（变量i=0；i{
cursor.style.height=“80px”；
cursor.style.width=“80px”；
cursor.style.animation=“cursorAnimation 5s linear infinite”；
cursor.style.background=“白色”；
});
clickableCursor[i]。addEventListener（'mouseout'，（）=>{
cursor.style.height=“40px”；
cursor.style.width=“40px”；
cursor.style.animation=“无”；
cursor.style.border=“2px纯白”；
cursor.style.background=“无”；
});
}
正文{
光标：无；
}
.集装箱{
高度：3000px；
宽度：100%；
位置：相对位置；
背景：橙色；
}
#光标{
背面可见性：隐藏；
z指数：100000000；
位置：固定；
宽度：40px；
高度：40px；
边框：2倍纯白；
转换：.1s；
边界半径：50%；
指针事件：无；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡时间：100ms；
过渡定时功能：缓解；
}
#游标：：之前{
内容：''；
位置：绝对位置；
高度：7px；
宽度：7px；
边界半径：100%；
背景色：白色；
}
.可点击光标{
字体大小：50px；
颜色：白色；
位置：固定；
背景：黑色；
}
.一{
顶部：50px；
左：50px；
}
.二{
顶部：50px；
右：50px；
}
.文本{
填充：50px
}
.文本：悬停{
颜色：黑色；
z指数：100000001；
位置：相对位置；
}

你好
更新到更新的问题

将
替换为
div
，放入

然后用
包装文本，并制作css

.text:hover {
  color: black;
  z-index: 1000000001; /*higher that #cursor's*/
  position: relative; /*this is neede to z-index work*/
}

另外，如果将
替换为
，则从
中去掉
填充物
。单击可点击光标
，并将其置于
。文本
，即现在的
，结果会更好。在代码段中查找


//光标已修改
var cursor=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，函数（e）{
e、 停止传播（）；
var x=e.clientX；
变量y=e.clientY；
cursor.style.left=x+'px'；
cursor.style.top=y+'px'；
});
//光标悬停已修改-悬停图元时
var cursor=document.getElementById（'cursor'）；
var clickableCursor=document.getElementsByClassName（'clickableCursor'）；
对于（变量i=0；i{
cursor.style.height=“80px”；
游标样式