cssz-index属性和javascript背景鼠标交互

我正在尝试添加一个径向渐变作为我博客帖子的背景。 该径向渐变应在 博客帖子卡悬停。这里是关于 效果（）

问题是，由于卡的其他div元素（标题、图像、标签、按钮）干扰了悬停，因此无法按预期工作。我怎样才能解决这个问题？ 以下是博客帖子卡的代码：

let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}

---

谢谢你的帮助

> p>而不是使用<代码> .EngutuxCclipse Suthor（<代码> >和<>代码>左/右.<代码>随子元素被摇动而改变，考虑使用<代码> .OffStList./OffStReTe> <代码> > CARD< /COD>元素本身。

let backgroundgradient=document.querySelector（'.card'）；
backgroundgradient.onmousemove=函数（e）{
设x=e.clientX-backgroundgradient.offsetLeft；
设y=e.clientY-（backgroundgradient.offsetTop-window.pageYOffset）；
backgroundgradient.style.setProperty（'-x'，x+'px'）；
backgroundgradient.style.setProperty（'-y'，y+'px'）；
}

.card，
.imagebox{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
}
.imagebox{
弹性：31 30支；
高度：计算（282px+5vw）；
溢出：隐藏；
}
.imagebox img{
最大宽度：100%；
最小宽度：100%；
最小高度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
对象匹配：覆盖；
物体位置：50%50%；
填充：15px；
边界半径：30px；
z指数：1；
}
.卡片{
背景:#bdbd；
框大小：边框框；
边框：2个实心#f93668；
溢出：隐藏；
位置：相对位置；
边界半径：20px；
溢出：隐藏；
}
.卡：以前{
--大小：0；
内容：''；
位置：绝对位置；
左：var（--x）；
顶部：var（--y）；
宽度：var（--大小）；
高度：var（--大小）；
背景：径向梯度（圆最近侧，#f93668，透明）；
转换：翻译（-50%，-50%）；
过渡：宽0.8s缓和，高0.4s缓和；
}
.卡：悬停：之前{
--大小：90雷姆；
}
.卡片内容{
填充：16px 32px；
弹性：10140CH；
z指数：2；
}
.卡片标签{
利润率：0-8px；
}
.卡片标签{
显示：内联块；
利润率：8px；
字号：0.875em；
文本转换：大写；
字号：600；
字母间距：0.02em；
颜色：var（--初级）；
}
.名片名称{
保证金：0；
字体大小：夹钳（2.4em，1.1vw，1.1em）；
字体系列：“Roboto Slab”，Helvetica，Arial，无衬线；
}
.卡片标题a{
文字装饰：无；
颜色：继承；
}
.卡元数据{
保证金：0；
}
.信用卡储蓄{
显示器：flex；
对齐项目：居中；
填充：6px 14px 6px 12px；
边界半径：4px；
边框：2倍纯色；
颜色：var（--初级）；
背景：无；
光标：指针；
字体大小：粗体；
}
.卡保存svg{
右边距：6px；
}
/*车身布局*/
* {
框大小：边框框；
}
身体{
--初级：rgb（249,54,104）；
--灰色：#4545；
--浅灰色：#666；
颜色：var（--灰色）；
线高：1.55；
显示器：flex；
证明内容：中心；
柔性包装：包装；
字体系列：“Roboto”，Helvetica，Arial，无衬线；
}
.集装箱{
宽度：夹钳（20px，90%，90%）；
填充：24px；
}

放荡的都市主义

阅读更多
< /代码> 而不是使用<代码> >代码> >和<代码>左/右.<代码>随子元素被摇动而变化，考虑使用<代码> .OffStReist./OffStReTe> <代码> > CARD< /COD>元素本身。


let backgroundgradient=document.querySelector（'.card'）；
backgroundgradient.onmousemove=函数（e）{
设x=e.clientX-backgroundgradient.offsetLeft；
设y=e.clientY-（backgroundgradient.offsetTop-window.pageYOffset）；
backgroundgradient.style.setProperty（'-x'，x+'px'）；
backgroundgradient.style.setProperty（'-y'，y+'px'）；
}
.card，
.imagebox{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
}
.imagebox{
弹性：31 30支；
高度：计算（282px+5vw）；
溢出：隐藏；
}
.imagebox img{
最大宽度：100%；
最小宽度：100%；
最小高度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
对象匹配：覆盖；
物体位置：50%50%；
填充：15px；
边界半径：30px；
z指数：1；
}
.卡片{
背景:#bdbd；
框大小：边框框；
边框：2个实心#f93668；
溢出：隐藏；
位置：相对位置；
边界半径：20px；
溢出：隐藏；
}
.卡：以前{
--大小：0；
内容：''；
位置：绝对位置；
左：var（--x）；
顶部：var（--y）；
宽度：var（--大小）；
高度：var（--大小）；
背景：径向梯度（圆最近侧，#f93668，透明）；
转换：翻译（-50%，-50%）；
过渡：宽0.8s缓和，高0.4s缓和；
}
.卡：悬停：之前{
--大小：90雷姆；
}
.卡片内容{
填充：16px 32px；
弹性：10140CH；
z指数：2；
}
.卡片标签{
利润率：0-8px；
}
.卡片标签{
显示：内联块；
利润率：8px；
字号：0.875em；
文本转换：大写；
字号：600；
字母间距：0.02em；
颜色：var（--初级）；
}
.名片名称{
保证金：0；
字体大小：夹钳（2.4em，1.1vw，1.1em）；
字体系列：“Roboto Slab”，Helvetica，Arial，无衬线；
}
.卡片标题a{
文字装饰：无；
颜色：继承；
}
.卡元数据{
保证金：0；
}
.信用卡储蓄{
显示器：flex；
对齐项目：居中；
填充：6px 14px 6px 12px；
边界半径：4px；
边框：2倍纯色；
颜色：var（--初级）；
背景：无；
光标：指针；
字体大小：粗体；
}
.卡保存svg{
右边距：6px；
}
/*车身布局*/
* {
框大小：边框框；
}
身体{
--初级：rgb（249,54,104）；
--灰色：#4545；
--浅灰色：#666；
颜色：var（--灰色）；
线高：1.55；
显示器：flex；
证明内容：中心；
柔性包装：包装；
字体系列：“Roboto”，Helvetica，Arial，无衬线；
}
.集装箱{
宽度：夹钳（20px，90%，90%）；
填充：24px；
}