Contained elements to take on hover properties of parent element

Question

My scenario is I want the hover effects of the parent element to be applied to the child elements, effectively over-riding styling settings of the children, and I want to this to be strictly CSS. I can do it easily enough with javascript, but is there a pure CSS approach? Thanks for any suggestions.

div {
}

div:hover {
    background-color: red;
    /*change contained span backgound-color to red as well*/
}

span {
    background-color: yellow;
}

<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>

score 1 · Accepted Answer · answered Mar 05 '21 at 13:06

1

If I understand your question correctly, then add another hover specifying all-child elements as *, applying the inheritance rule.

div:hover * {
    background-color: inherit;
}

Snippet:

div {
}

div:hover {
    background-color: red;
    /*change contained span backgound-color to red as well*/
}

div:hover * {
    background-color: inherit;
}

span {
    background-color: yellow;
}

<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>

answered Mar 05 '21 at 13:06

s.kuznetsov

14,870
3
10
25

Thank you, exactly what I was looking for. – Len White Mar 05 '21 at 15:05
@LenWhite, glad to help :) – s.kuznetsov Mar 05 '21 at 16:39

score 0 · Answer 2 · answered Mar 05 '21 at 13:06

div {
}



span {
    background-color: yellow;
}

div:hover span {
    background-color: red;
    /*change contained span backgound-color to red as well*/
    color:#fff;
}

<div>When I mouse over this div, I want the <span>the contained span background</span> to take on the hover settings of the parent div.</div>

Contained elements to take on hover properties of parent element

2 Answers2