css - 在一个 react ​​元素中嵌套两个伪类悬停以更改 div 中的不透明度并缩放图像

Question

我试图通过伪类“悬停”更改 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 支持这样的东西来影响其他组件。阅读此 documentation .

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 组件悬停，它会改变 Image 和 Info 组件的样式。