悬停css上的指针事件+不透明度答案

【问题标题】：pointer-events + opacity on hover css悬停css上的指针事件+不透明度
【发布时间】：2015-11-12 08:48:49
【问题描述】：

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

我一开始以为

opacity: 0;

和

pointer-evets: none;

然而，只有 opcaity 0 就可以解决问题；您不能通过 div 和指针事件单击：无；它不会褪色。有没有人解决这个问题？

【问题讨论】：

你试过visibility: hidden;吗？

标签： html css hover opacity pointer-events

【解决方案1】：

试试opacity: 0.001;。

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

【讨论】：

【解决方案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>

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

【讨论】：

基本上这正是我的网站的反应，但是当我点击子框时，我想点击下面的父框。
@Vheanom 只需删除 e.stopPropagation();。请查看更新后的代码。
是的，成功了，只是在调整代码时遇到了一些小问题，因为我有点新。谢谢！
@Vheanom 不用担心。欢迎！ :)

【解决方案3】：

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

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

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

【讨论】：

不，它不会从布局中删除它。
它不会从布局中删除div，div仍然会影响布局，但是在这个div上不能触发指针事件（即可以点击“通过”它）。