1

i tried multiple selectors but couldnt get anything out.

html:

<div class="backg">
    <div class="colors color1">red</div>
    <div class="colors color2">blue</div>
    <div class="colors color3">green</div>
</div>

css:

.backg{

    display:flex;
    flex-flow:row wrap;
    padding:1cm;
    justify-content: space-evenly;
    border:5px double black

}
.color1{

    border: 5px solid red;
}

.color1:hover{

    background-color: red;
}

the .color1:hover attribute should turn the whole page to red and similarly for other two divs

one thing i tried was the :root selector to change the body background but failed.

Samarth
  • 11
  • 4
  • The question is closed with a reference to the answer about `:has`, but I think that we can try to solve the problem without it here. Have you tried using pseudo-elements that extend beyond the child elements and act as a background for the parent? – Eugene Jul 28 '22 at 16:49
  • Use it: `.backg{ position: relative; }` `.color1::before{ position: absolute; content: ""; inset: 0; background-color: red; z-index: -1; display: none; }` `.color1:hover::before{ display: block; }` @paulie-d Can you reopen it? One line code looks creepy =) – Eugene Jul 28 '22 at 16:57
  • @Eugene added another duplicate – Temani Afif Jul 28 '22 at 20:55

0 Answers0