如何将鼠标悬停在指针上-events：none / 解开这个谜团的另一种方法-解网

问：

我有 4 个元素彼此重叠，具有以下不透明度设置（从下到上）：

ID - 0
ID - 0
分区 - 1
文本 - 1

我需要通过悬停元素 2，不透明度设置的更改将是：

编号 - 1
id - 没关系
分区 - 1
文本 - 0

因为元素 2 是我的触发器，所以我需要两个元素 3+4 ，所以悬停会影响元素 2（即在它们下方）。pointer-events:none

我相信这两个元素都没有改变的原因是.我说得对吗？pointer-events:none


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>

HTML CSS 悬停指针事件

如何将鼠标悬停在指针上-events：none / 解开这个谜团的另一种方法

how to hover a pointer-events:none / another way to solve this mystery

评论

评论