Javascript 如何使悬停缩放效果仅适用于一个对象而不是所有对象？

我正在尝试修复代码，以允许Mui

在用户鼠标悬停在对象上时创建悬停效果。我让它在一定程度上起作用，但是，效果适用于所有对象，而不是一个

我已经为这个问题复制了一个沙盒

以下是用于悬停效果的代码：

根目录：{
最大宽度：310，
过渡：“转换0.15秒缓进缓出”，
“&:hover”：{transform:“scale3d（1.05,1.05,1）”，
}

setState（{raised:true，shadow:3}）
onMouseOut={（）=>setState（{raised:false，shadow:1}）
raised={state.raised}
zdepth={state.shadow}
>

您正在更改mouseOver和mouseOut上的state.raised和state.shadow以应用不同的样式，但由于它们是state变量，因此实际上将每张卡更改为相同的属性raised和zdepth

我建议您尝试使用您正在使用的相同css类实现所需的凸起和阴影状态

---

onMouseOut意味着鼠标不在它上面，所以将您试图实现的shadow:1效果添加到根css类就可以了。然后将凸起和阴影：3效果添加到&：悬停中。

我不确定我是否理解，你的意思是创建一个切换到所需CSS的条件吗？因为你想要的是在鼠标悬停时将凸起效果添加到卡中，你只需添加

框阴影：0px 5px 5px-3px rgb（0 0/20%），0px 8px 10px 1px rgb即可（0/14%）、0px 3px 14px 2px rgb（0/12%）

到悬停伪值。您遇到的问题是，每一张卡都在更改状态

提升的
和
阴影的
。由于它是唯一的值，所以其他每一张卡也在使用通过悬停任何卡而更改的相同状态。解决方案是为每一张卡设置一个单独的状态（出于明显的原因，我不推荐使用css）或使用css在每个元素中单独实现所需的效果。这可以通过更改根类来实现。请检查我修复它的位置。哦，我明白了，非常感谢您的帮助和帮助！