我正在尝试修复我的代码以允许 Mui<cards>在用户的鼠标悬停在对象上时创建悬停效果。我让它在一定程度上起作用，但是，效果适用于所有对象，而不是一个。
https://codesandbox.io/s/sharp-cookies-o23ps
我已经为这个问题复制了一个沙箱。
这是用于悬停效果的代码：
root: {
maxWidth: 310,
transition: "transform 0.15s ease-in-out",
"&:hover": { transform: "scale3d(1.05, 1.05, 1)" },
}
<Card
className={classes.root}
classes={{ root: state.raised ? classes.cardHovered : "" }}
onMouseOver={() => setState({ raised: true, shadow: 3 })}
onMouseOut={() => setState({ raised: false, shadow: 1 })}
raised={state.raised}
zdepth={state.shadow}
>
您正在更改 mouseOver 和 mouseOut 上的 state.raised 和 state.shadow 以应用不同的样式，但由于它们是 state 变量，实际上将每张卡片更改为相同的属性 raise 和 zdepth。
我建议您尝试使用您正在使用的相同 css 类来实现所需的凸起和阴影状态。
onMouseOut 意味着它不在鼠标上，因此将您要实现的 shadow: 1 效果添加到根 css 类中即可。然后将 raise 和 shadow: 3 效果添加到 &:hover。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句