0

When I try to add hover on the first child to add effect on the second child it works but when I try in reverse it doesn't do anything

  <body>
    <style>
      .first__child {
        height: 100px;
        aspect-ratio: 1;
        background-color: red;
      }
      .second__child {
        height: 100px;
        aspect-ratio: 1;
        background-color: red;
      }
      .first__child:hover ~ .second__child {
        background-color: blue;
      }
      .second__child:hover ~ .first__child {
        background-color: blue;
      }

    </style>
    <main>
      <div class="first__child">
        <p>dummy text</p>
      </div>
      <div class="second__child">
        <p>dummy text</p>
      </div>
    </main>
  </body>

I tried "+" or ">" instead of "~" but it doesn't work , Is there a "previous sibling" selector? can't find answer from this question either

Liminal
  • 11
  • 1
  • Look into :has e.g. main:has(.second__child:hover) .first__child Many of the main browsers have implemented :has, but Firefox still has it hidden behind a flag. – A Haworth Jan 10 '23 at 22:20

0 Answers0