指针事件 + 悬停时的不透明度 css

Question

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

我一开始以为

opacity: 0;

和

pointer-evets: none;

可以做到这一点，但是，只有 opcaity 0；您不能通过 div 和指针事件单击：none；它不会褪色。有人对此有解决方案吗？

Answer 1

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

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

编辑："remove from the layout" 选词不当。评论者当然是对的，它还在。

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>

请尝试同时点击这两个框。一个是 parent，另一个是 child。 child 即使处于隐藏状态也可以点击。

Answer 3

尝试opacity: 0.001;。

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

指针事件 + 悬停时的不透明度 css

pointer-events + opacity on hover css

html

css

hover

opacity

pointer-events