<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "style.css">
<script src="script.js"></script>
<title>Кнопка</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no'>
</head>
<body>
<input type="text" id="inp" readonly>
<div id="buttonsAndTime">
<button type = "button" id = "but" class = "active" onClick = "opening()">Поменять слово</button>
<button type = "button" id = "but1" class = "active" onClick = "gg()">Старт</button>
<button type = "button" id = "but2" class = "active" onClick = "pause()">Пауза</button>
<button type = "button" id = "but3" class = "active" >Передать ход</button>
<button type = "button" id = "but4" class = "active" >Забанить слово</button>
<button type = "button" id = "but5" class = "active" onClick = "go()">Дальше</button>
<button type = "button" id = "but6" class = "active" >Статистика</button>
<button type = "button" id = "but11" class = "active" onClick = "gg()">Старт</button>
<input type="text" id="time" value="0:10" disabled>
<input type="text" id="time1" hidden disabled>
<input type="text" id="ll" disabled>
</div>
</body>
</html>
#buttonsAndTime, #but, #but1, #but2, #but3, #but4, #but5, #but6, #but11, #inp, #time, #time1, #ll {
position: absolute;
outline: none;
}
input[type=text] {
text-align: center;
background-color: white;
color: black;
font-family: 'Trebuchet MS';
font-size: 3.5vh;
}
input[disabled] {
text-align: center;
color: black;
font-family: 'Century Gothic';
font-size: 3vh;
background: linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229));
}
#inp {
width: 15%;
margin: 21% 41.56%;
height: 4.7%;
border: thin solid lightsteelblue;
}
#buttonsAndTime {
width: 98%;
height: 98%;
}
#time, #time1 {
width: 10%;
position: absolute;
height: 8%;
border: none;
z-index: 1;
margin: 6% 22%;
}
#but1, #but2, #but5, #but11 {
width: 7%;
margin-top: 25%;
}
#but, #but1, #but2, #but3, #but4, #but5, #but6, #but11 {
display: inline-block;
text-align: center;
text-decoration: none;
border: thin solid transparent;
border-radius: 0.7vh 0.7vh 0.7vh 0.7vh;
color: #ffffff;
background-color: #9555af;
font-size: 1vw;
font-family: 'Candara Light';
}
#but1, #but2, #but3, #but5, #but6 {
visibility: hidden;
}
#but {
margin-top: 6%;
}
#but1 {
margin-left: 42.4%;
}
#but2, #but5{
margin-left: 50.9%;
}
#but3 {
margin-top: 16%;
}
#but4 {
margin-top: 9%;
}
#but6 {
margin-top: 13%;
}
#but11 {
margin-left: 46.8%;
}
#but, #but3, #but4, #but6 {
width: 11%;
height: 5.5%;
margin-left: 72%;
}
#ll {
background: linear-gradient(rgb(145, 152, 229), rgb(230, 100, 101));
border: none;
opacity: 0.6;
width: 18%;
height: 5%;
margin: 21.46% 22%;
}
.inactive {
opacity: 0.6;
cursor: default;
}
.active {
opacity: 1;
cursor: pointer;
}
.active:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
transition-duration: 450ms;
}
Игнорируется псевдокласс для класса active. Как фиксить?
Простой
