html - 在使用不透明度和可见性属性时，如何让 child 遵循与 parent 相同的行为？

Question

抱歉标题可能不清楚，但我不知道如何准确描述我面临的问题。我创建了一个 jsFiddle希望澄清问题。

我有以下布局，其中所有 4 个 div 都有 opacity: 1 和 visibility: visible 和 div a 和 b 都有 position:absolute 和 top: 0 和 left: 0。

<div class="a">
  <div class="child-a"></div>
</div>
<div class="b">
  <div class="child-b"></div>
</div>

如果您查看示例，您可以将 div b 更改为:opacity: 0 和 visibility: hidden(这发生在转换).现在你只看到 div a 和它的 child child-a。你可以点击 div a 但你不能点击 child-a。如果您尝试这样做，您实际上会点击 child-b。

尽管 child-b 的父级不再被鼠标事件触发并且似乎被隐藏了，但它仍然会监听/被它们触发。我希望 child 也像其 parent 一样“真正”隐藏起来。

我如何确保点击您看到 child-a 的区域实际上也应用于child-a？我确实希望能够在显示和隐藏 div 之间使用不透明度转换，因此使用 display:none 是您无法转换的(据我了解)。

我确实在示例中添加了 display:none 切换，因为该切换确实按照我期望的方式运行(只有这样你才能再转换)。

Answer 1

你可以玩一下pointer-events:

.fade-in {
    pointer-events: none;
}
.fade-in.show-me {
    pointer-events: auto;
}
.fade-in .fade-in {
    pointer-events: none;
}
.show-me .show-me {
    pointer-events: auto;
}

这是一个演示:

var a = document.getElementsByClassName("a")[0];
var b = document.getElementsByClassName("b")[0];
var c = document.getElementsByClassName("c")[0];
var d = document.getElementsByClassName("d")[0];
var e = document.getElementsByClassName("e")[0];
var childA = document.getElementsByClassName("child-a")[0];
var childB = document.getElementsByClassName("child-b")[0];

c.onclick = function () {
  if (b.classList.contains("show-me")) {
    b.classList.remove("show-me");
  } else {
    b.classList.add("show-me");
  }
};
d.onclick = function () {
  if (b.classList.contains("hide")) {
    b.classList.remove("hide");
  } else {
    b.classList.add("hide");
  }
};

a.onclick = function () { console.log("a");e.innerHTML = "a<br>"+e.innerHTML; };
b.onclick = function () { console.log("b");e.innerHTML = "b<br>"+e.innerHTML; };
childA.onclick = function (ev) {ev.stopPropagation(); console.log("child-a");e.innerHTML = "child-a<br>"+e.innerHTML; };
childB.onclick = function (ev) {ev.stopPropagation(); console.log("child-b");e.innerHTML = "child-b<br>"+e.innerHTML; };

.a,
.b {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}
.a:hover,.b:hover {
  box-shadow: 0 0 2px #000;
}
.a {
  background-color: #fee;
}
.b {
  background-color: #eef;
}
.child-a,.child-b {
  float: left;
  width: 80px;
  height: 80px;
  margin: 25px;
  box-shadow: 0 0 2px #000;
  cursor: pointer;
  line-height: 100px;
  text-align: center;
}
.child-a:hover,.child-b:hover {
  box-shadow: 0 0 4px #000;
}
.fade-in {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
  transition-duration: 200ms;
  transition-property: opacity, visibility;
  transition-timing-function: ease;
  pointer-events: none;
}
.fade-in.show-me {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fade-in .fade-in {
  pointer-events: none;
}
.show-me .show-me {
  pointer-events: auto;
}
.c, .d {
  width: 240px;
  height: 40px;
  margin-top: 30px;
  cursor: pointer;
  background-color: #fff;
  margin-left: 160px;
  box-shadow: 0 0 2px #000;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
}
.c:hover, .d:hover {
  box-shadow: 0 0 4px #000; 
}
.hide {
  display: none;
}
.e {
  clear: both;
}

<div class="a fade-in show-me">
  <div class="child-a fade-in show-me">a-child</div>
</div>
<div class="b fade-in show-me">
  <div class="child-b fade-in show-me">b-child</div>
</div>

<div class="c">Toggle b opacity and visibility</div>
<div class="d">Toggle b display</div>
<div class="e"></div>