我有一个覆盖另一个元素的元素。主要元素是一个画布，其中元素经常与鼠标交互，而直接位于其上方的元素仅显示充当小标记的元素。相同的位置，相同的大小，重要的是叠加层位于画布之上。
让这个“覆盖”只存在可见性是什么意思？就像没有可能的用户输入一样，因为就其目的而言，它并不是真的可以与之交互，只是显示一些东西。
在 CSS 中删除选择会阻止您单击它，但它仍然位于其他元素的顶部并且不允许鼠标事件。隐藏元素会消除它的存在，但也会使其不可见。
在普通的桌面应用程序中，您只需在屏幕上绘制一些内容并根据需要添加功能，但是对于 HTML，这两个内容本质上是相同的。
事实证明，pointer-events只需将CSS 属性设置为none您想要不存在的任何内容即可。
我认为它会比这更有趣，但是 CSS 有一种内置的方式。
<div id="canvas"></div>
<div id="overlay"></div>
#canvas, #overlay {
width: 500px;
height: 500px;
position: absolute;
}
#canvas {
background: blue;
}
#overlay {
background: red;
pointer-events: none; // right here
}
$('#canvas').click(function() {
alert('Clicked');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句