悬停孩子时，我无法更改父样式样式组件

如何解决悬停孩子时，我无法更改父样式样式组件

有人悬停孩子时，可以给我解释一下如何影响父组件样式吗？

例如，我想更改父级height，但没有任何反应。我的组件：

const Intro = () => (
    <Wrapper>
        <BackgroundHeader />
        <Shape />
        <Inner>
            <Header>
                <Logo>
                    <Image src={'sushi_icon.png'} width={107} height={83} />
                </Logo>
                <Nav>
                    <NavItem>
                        <NavLink>home</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink>product</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink>promo</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink>about</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink>contact</NavLink>
                    </NavItem>
                </Nav>
                <SearchIcon src={'search.png'} width={25} height={25} />
            </Header>
            <Jumbotron>
                <Title>delicious<br />  sushi</Title>
                <BodyText>
                    Lorem ipsum dolor sit amet,consecte&#173;tur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
                </BodyText>
                <Button>order now</Button>
            </Jumbotron>
        </Inner>

    </Wrapper>
);

我的样式文件：

const Shape = styled.div `
 background-image: url('shapeIntro.png');
 width: 100%;
 height: 700px;
 position: absolute;
 top:0;
 left:0;
 z-index: 0;
`;

const Button = styled.button `
 text-transform: uppercase;
 font-size: 28px;
 width: 322px;
 height: 65px;
 border-radius: 32.5px;
 color: #ff7f7f;
 background: #fff;
 border: none;
 font-weight: 700;
 z-index: 1;

 &:hover{
   cursor: pointer;

   ${Shape} {
      height: 1000px;
   }
 }
`;

我测试了许多选项，但一切都无济于事。