html - 悬停css上的指针事件+不透明度

Question

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

起初我以为

opacity: 0;

和

pointer-evets: none;

然而，只有 opcaity 0 就可以解决问题；你不能通过 div 和 pointer-events: none 点击；它不会褪色。有人对此有解决方案吗？

Answer 1

如果一个 div 位于另一个 div 之上，它将捕获所有事件，即使它处于 opacity:0 也是如此。

您可以尝试visibility:hidden，因为 AFAIR 这实际上从布局中删除了一个 div。

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

Answer 2

试试opacity: 0.001;。

它在视觉上带来了完全相同的结果，并且帮助我缩短了同样不起作用的opacity:0;类似情况。pointer-events: none;

Answer 3

你可以这样尝试：

$(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>

请尝试单击这两个框。一个是父母，另一个是孩子。即使隐藏，孩子也可以点击。