显示没有“hitbox”的元素（不采取鼠标/触摸输入） [英] Show an element without "hitbox" (does not take mouse/touch input)

问题描述

我想要实现的是一种通知框（ div 元素）。我想用一些不透明度显示它。我需要的盒子是看不见的事件。例如，如果框在按钮的顶部，我仍然可以通过该框点击按钮。

What I am trying to achieve is a kind of notification box (a div element). I would like to show it with some opacity. And I need the box to be "invisible" by the events. For example, if the box is on top of a button, I can still click the button through the box.

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

Some may suggest make it movable by the user, but the current UI does not allow me to do so.

可以通过任何手段实现吗？ HTML，CSS，Javascript和jQuery都可以使用。

Can it be achieved by any mean? HTML, CSS, Javascript and jQuery are all available.

我当前的通知框CSS：

My current notification box CSS:

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

推荐答案

在此帖子

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

这里是 codepen 在行动中显示它。

Here is a codepen showing it in action.

这篇关于显示没有“hitbox”的元素（不采取鼠标/触摸输入）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！