CODEWITHSUNDEEP
cssreactjscss-selectorsstyled-componentspseudo-class
user20816202
user20816202

Reputation: 31

Nesting two pseudo-class hover in one react element for changing opacity in a div and scale an image

I am trying to change the behavior of two elements inside a div through the pseudo-class 'hover'. I would like when I hover the item, the div inside of it appears and the image scales its size. This is for an image gallery.

But when I tried the hover over the item this has a weird behavior like a flicking. How can nest two hover to affect different child elements.

This is the example:

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

<item>
                           
    <div></div>
    <img />
                      
</item>

Upvotes: 3

Views: 147

Answers (1)

Arnas
Arnas

Reputation: 662

styled-component support something like this to affect other component. Read this 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

If the Item component hovered, it will change style of Image and Info component.

Upvotes: 2

Related Questions