指针事件+悬停CSS上的不透明度

Question

我正在构建一个网站，其中一个单独的 div 位于另一个 div 之上。当您将鼠标悬停在顶部 div 上时，我希望它在您将鼠标悬停在其上时消失，并且您应该能够单击它。

我一开始也这么认为

opacity: 0;

和

pointer-evets: none;

然而，只要不透明度为 0，

就可以解决问题；你不能点击div，并且使用pointer-events: none;它不会褪色。 有人有办法解决这个问题吗

Answer 1

如果一个 div 位于另一个 div 之上，它将捕获所有事件，即使它的不透明度为：0。

你可以尝试

visibility:hidden

，因为AFAIR这实际上从布局中删除了一个div。

编辑：“从布局中删除”是一个糟糕的词语选择。评论者当然是对的，它仍然存在。

Answer 2

你可以这样尝试：

$(function () {
  $(".parent").click(function () {
    alert("I am in Parent");
  });
  $(".child").click(function (e) {
    alert("I am in Child");
  });
});

* {font-family: 'Segoe UI';}

.parent {border: 1px solid #ccc; position: relative; padding: 50px;}
.parent .child {border: 1px solid #ccf; padding: 15px; position: absolute; left: 10px; top: 10px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}

.child:hover {opacity: 0;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="parent">
  <div class="child"></div>
</div>
<p>Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.</p>

请尝试单击两个框。一个是父母，另一个是孩子。即使子项被隐藏，它也将是可点击的。

Answer 3

尝试

opacity: 0.001;

。

它在视觉上带来了与

opacity:0;

完全相同的结果，并帮助我缩短了

pointer-events: none;

也不起作用的类似情况。

Answer 4

$(function () {
  $(".parent").click(function () {
    alert("I am in Parent");
  });
  $(".child").click(function (e) {
    alert("I am in Child");
  });
});

* {font-family: 'Segoe UI';}

.parent {border: 1px solid #ccc; position: relative; padding: 50px;}
.parent .child {border: 1px solid #ccf; padding: 15px; position: absolute; left: 10px; top: 10px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}

.child:hover {opacity: 0;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="parent">
  <div class="child"></div>
</div>
<p>Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.</p>