How do you make transparent HTML panel with normal children?

Question

My panel is <div> or <span>. It is actually invisible but how do I make it transparent for mouse clicks? You see that first button gains more 1s on every clicks on the screen. The train stops however when you click in the upper right invisible panel with buttons. It selects the buttons instead, which means that panel is not completely transparent and intercepts the mouse events.

#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%;
}

<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>

We cannot help you unless you define: 1. What is a panel? 2. What is supposed to become transparent on mouse click? 3. What is meant to be invisible vs transparent? 4. What stops reacting on click on the panel? — AGE, Jan 30 '15 at 20:00
Hardly there is any need to clarify anything to people who do not see that there is only one `div` with children elements and cannot relate this to what is usually meant to be `panel`. — , Jan 30 '15 at 21:29

score 0 · Answer 1 · answered Jan 30 '15 at 19:59

0

Have you tried changing you background color to transparent?

background-color: transparent;

answered Jan 30 '15 at 19:59

Dillon

687
6
9

The OP hasn't made it clear at all what he's looking to have transparent, if you read the question carefully you will see that it makes no sense other than making 'some panel' transparent. – AGE Jan 30 '15 at 20:00

score 0 · Answer 2 · 2015-02-07T21:07:43.017

That's easy: make the panel virtual. Although eliminating div may have some consequences, example gets fixed if we apply the styles to controls rather than parent panel.

.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>

We can even leave the panel. Just adjust its z-order separately

.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>

How do you make transparent HTML panel with normal children?

2 Answers2