0

Окно запуска игры содержит кнопку START. Когда окно в body кнопка работает, а когда я окно помещаю в контейнер - кнопка становится некликабельной.

<div class="container">
            <div class="canvas">
                <canvas width="800" height="600" id="screen"></canvas>
                <div class="startWindow">
                    <form>
                    <button class="start">Start</button>
                    </form>
                </div>
            </div>

        <div class="highscores"></div>

</div>

body{
	background-image: url(img/body.jpg);
	z-index: -5;
	
}
.container{
	height: 600px;
	width: 1150px;
	background-color: cyan;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
}
canvas{
	border:1px solid silver;
	background-color:black ;
	position: relative;
	display: none;
	z-index: 1;
	float: left;
}
.highscores{
	width: 300px;
	height: 600px;
	margin-left: 30px;
	float: right;
	background-color: red;
	border:1px solid silver;

}
.startWindow{
	border: 5px solid green;
	background-image: url(img/startWindow.jpg);
	width: 626px;
	height: 491px;
	z-index: 3;
	position: absolute;
	margin: auto auto;
	box-shadow: 0 0 20px green;
	display: none;
}

.start{
	width: 200px;
	height: 40px;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	bottom: 28px;
	background-color: #32CD32;
	border-color: green;
	z-index: 5;
	font-size: 30px;
	box-shadow: 0 0 10px green;
}
.start:hover{
	box-shadow: 0 0 30px green;
	cursor: pointer;
}

1 ответ 1

1

Проблема заключается в том, что кнопка у Вас описывается в форме StartWindow. Которому в свою очередь присвоен стиль в CSS

display: none;

А, согласно описанию display с параметром none

Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

Если убрать и CSS из .startWindow display: none;, то блок отображается.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.