Question

我的面板为<div>或<span>。它实际上是不可见的，但如何让它对鼠标点击透明？您会看到第一个按钮在屏幕上的每次点击中都会获得更多1秒。然而，当您使用按钮点击右上角的隐形面板时，火车会停止。它会选择按钮，这意味着面板不是完全透明的，并且会截取鼠标事件。

＆＃13;

#controls {
    left: 0; top: 0;
    position: absolute; 
    margin: 0;
    padding: 0;

}
#rest {
    background-color:red;
    left: 0; top: 0;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
<div id="controls">  
    <button id="button1">button11111111111111111</button><br />
    <button>button3</button> <br><button>button5</button><br />
    <button>button4</button>
</div>

＆＃13;

Answer 1

您是否尝试将背景颜色更改为透明？

background-color: transparent;

Answer 2

这很容易：让面板变得虚拟。虽然消除div可能会产生一些后果，但如果我们将样式应用于控件而不是父面板，则示例会得到修复。

.controls {
    left: 0; top: 0; position: relative; margin: 0; padding: 0;
}
#rest {
    background-color:red; left: 0; top: 0; position: absolute; margin: 0; padding: 0; width: 100%; height: 100%;
}

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
    <button class="controls" id="button1">button11111111111111111</button><br />
    <button class="controls">button3</button> <br><button class="controls">button5</button><br />
    <button class="controls">button4</button>

我们甚至可以离开小组。只需单独调整其z顺序

.controls {
    left: 0; top: 0; position: relative; margin: 0; padding: 0;
}
#rest {
    background-color:red; left: 0; top: 0; position: absolute; margin: 0; padding: 0; width: 100%; height: 100%;
}

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
  <div id="controls">
  <button class="controls" id="button1">button11111111111111111</button><br />
    <button class="controls">button3</button> <br><button class="controls">button5</button><br />
    <button class="controls">button4</button>
</div>

如何使用普通孩子制作透明的HTML面板？

2 个答案: