0

I have 4 elements on top of each other, with the following opacity settings (from bottom to top):

  1. id - 0
  2. id - 0
  3. div - 1
  4. text - 1

I need that by hover element 2, the changes of the opacity settings will be:

  1. id - 1
  2. id - doesn't matter
  3. div - 1
  4. text - 0

Because element 2 is my trigger, I need both elements 3+4 to be pointer-events:none , so the hover will affect element 2 (that is under them).

I believe the reason both of these elements don't change is that pointer-events:none . am i correct?


body {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgb(234, 255, 248);
  justify-content: center;
}


#background {
  position: absolute;
  background-color:rgb(255, 125, 125);
  width: 300px;
  height: 90px;
  opacity: 0;
}

#animation {
  position: absolute;
  background-color: rgb(25, 138, 0);
  width: 200px;
  height: 50px;
  opacity: 0;
}

.squares {
  position: absolute;
  background-color: purple;
  height: 30px;
  width: 50px;
  opacity: 1;
}

.A {
  color: aliceblue;
}

.text {
  position: absolute;
  color: red;
  pointer-events: none;
}

.squares:hover ~ #background {
  opacity: 1;
}

.squares:hover ~ #animation {
  opacity: 1;
}

.squares:hover ~ .text {
  opacity: 0;
}




<!DOCTYPE html>

<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>

<div class="c">
  <div class="squares">
    <div class="A">13</div>
     </div>

  <div id="background">11</div>

  <div id="animation">11</div>

          <div class="text">
            PARTICIPATE TO VIEW IMGS
          </div>

        </div>

    </body>
</html>
Gaya Gal
  • 1
  • The 4 elements from bottom to top seem to be .squares, #background, #animation, .text but this is not what your question describes as that has the second element as the one to be hovered. Please could you clarify? And no, pointer-events: none is not the reason things aren't changing on the hover of .squares. – A Haworth Jun 27 '23 at 20:37

1 Answers1

0

Yes the reason for not changing the elements was the pointer-events:none CSS you used.
As a workaround you could try using the div with class="c" which wraps all position:absolute elements as the trigger.
CSS needs to be changed as follows

.c:hover #background {
  opacity: 1;
}

.c:hover #animation {
  opacity: 1;
}

.c:hover .text {
  opacity: 0;
}

Also you may need to add display:grid or display:flex to the body CSS to center the elements using justify-content:center

Sandeepani Gunasekara
  • 1
  • 1