javascript - 显示没有 "hitbox"的元素(不接受鼠标/触摸输入)

Question

我想要实现的是一种通知框(div 元素)。我想用一些不透明度来展示它。而且我需要盒子在事件中“不可见”。例如，如果框位于按钮之上，我仍然可以通过框单击按钮。

有些人可能会建议让用户可以移动它，但当前的 UI 不允许我这样做。

可以通过任何方式实现吗？ HTML、CSS、Javascript 和 jQuery 都可用。

我当前的通知框 CSS:

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
}

Answer 1

使用此 post 中所述的 css 指针事件

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
    pointer-events: none;
} 

这是一个codepen在行动中展示它。