Styled Components - hover not working with template strings

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>
)

[Can you select the parent via CSS?](https://stackoverflow.com/a/1014958/8012206) — Joseph D., Nov 10 '20 at 09:17
Thanks @WilliamWang but I'm not sure what you mean? I'm following the Styled Components layout here https://styled-components.com/docs/advanced#referring-to-other-components — Luke, Nov 10 '20 at 09:19
@JosephD. I could but I'm trying to do it all in styled components. They have a guide on their website so I figure I must be making a mistake somewhere — Luke, Nov 10 '20 at 09:19
@Luke, Cool! what happens if you specify `width` and `height` to your `Parent` and `Overlay`? — Joseph D., Nov 10 '20 at 09:36
@JosephD. I don't understand, how would specifying width & height change anything? — Luke, Nov 10 '20 at 09:45
@Luke, [see this](https://codesandbox.io/s/amazing-cache-p6m8r?file=/src/App.js) — Joseph D., Nov 11 '20 at 01:30

William Wang · Answer 1 · 2020-11-10T13:55:07.750

0

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

edited Nov 10 '20 at 13:55

answered Nov 10 '20 at 09:22

William Wang

8,051
3
5
28

Thanks William - that only effects the parent. The problem I'm having is changing the background of the child when the parent is hovered. – Luke Nov 10 '20 at 09:28
what is child? AFAIK, you are gonna change the background when hover on – William Wang Nov 10 '20 at 13:52

Styled Components - hover not working with template strings

1 Answers1