Как сделать прозрачную панель HTML с нормальными детьми?

Моя панель <div> или <span>. Это фактически невидимо, но как сделать его прозрачным для щелчков мыши? Вы видите, что первая кнопка получает больше 1 секунды на каждом клике на экране. Однако поезд останавливается, когда вы нажимаете верхнюю правую невидимую панель с кнопками. Вместо этого выбираются кнопки, что означает, что панель не полностью прозрачна и перехватывает события мыши.Как сделать прозрачную панель HTML с нормальными детьми?

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

источник

2015-01-30 Anonymous

Какая панель? Быть конкретной. – Jhecht

Мы не можем вам помочь, если вы не определите: 1. Что такое панель? 2. Что должно быть прозрачным при щелчке мыши? 3. Что значит быть невидимым и прозрачным? 4. Что перестает реагировать на щелчок на панели? – AGE

Вряд ли есть необходимость прояснить что-либо людям, которые не видят, что существует только один элемент 'div' с дочерними элементами и не может относиться к тому, что обычно означает« панель ». –

Вы пробовали изменения вам цвет фона прозрачным?

background-color: transparent;

источник

2015-01-30 19:59:09 Dillon

ОП не ясно дал понять, что у него есть прозрачный, если вы внимательно прочитаете вопрос, вы увидите, что нет никакого смысла, кроме того, чтобы сделать «какую-то панель» прозрачной. – AGE

Это просто: сделайте панель виртуальной. Хотя удаление 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>

Мы можем даже оставить панель. Просто настроить его г-заказ отдельно

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

источник

2015-01-30 21:28:01

Как сделать прозрачную панель HTML с нормальными детьми?

ответ

Смежные вопросы