样式化组件 - 悬停不适用于模板字符串

Question

I've got a styled component that I want to change the background color of when its parent is hovered. right now the hover effect does nothing and I'm not sure why.

const Parent = styled('div')`
    position: relative;
    margin-bottom: 0;
`

const Overlay = styled('div')`
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    margin: 0;
    left: 0;
    right: 0;
    top: 65%;;
    background-color: rgba(128, 34, 69, 0.9);
    ${Parent}:hover & {
        display: flex;
        cursor: pointer;
        background-color: pink;
    }
`

return(
    <div>
        <Parent>
        <Overlay />
        </Parent>
    </div>
)

Answer 1

const Parent = styled('div')`
    position: relative;
    margin-bottom: 0;
    &:hover > div {
        display: flex;
        cursor: pointer;
        background-color: pink;
    }
`