在一个react元素中嵌套两个伪类hover，用于更改div的不透明度和缩放图像

Question

我试图通过伪类'hover'改变div内两个元素的行为。我想当我悬停的项目，它的div内部出现，图像缩放其大小。这是一个图片库。

但是当我尝试将鼠标悬停在项目上时，它有一个奇怪的行为，就像轻弹一样。如何嵌套两个悬停来影响不同的子元素。

下面是示例:

const item= styled(Box)(({ theme }) => ({
overflow: 'hidden',
'&:hover div': {
opacity: '1',
},
'&:hover img': {
scale: '1.1',
}
}));

<item>

<div></div>
<img />

</item>

Answer 1

styled-component支持这样的东西来影响其他组件。阅读本文档

const Image = styled.img`
width: 10px;
height: 10px;
`;
const Info = styled.div`
opacity: 0;
`;
const Item = styled.div`
${Info}:hover & {
opacity: 1;
},
${Image}:hover & {
scale: 1.1;
}
`;

<Item>
<Info />
<Image />
</Item

如果Item组件悬停，它将改变图像和信息组件的样式。