使用 CSS 网格，我在网格中有按钮和一个 div。该 div 也是一个包含更多按钮和 div 的网格。主网格中的按钮工作正常，但子网格中的按钮不会响应单击或悬停事件。我有一个 CSS 伪选择器，可以在悬停时在开始按钮上反转颜色，但它不起作用，我有一个 jQuery 选择器，可以在您单击它时使严格模式按钮反转颜色，然后反转回来第二次点击，但它也不起作用。
$(document).ready(function() {
$(".header").html("<h1 class='text-center'>Simon</h1>");
$(".count").html("—");
$(".start").html("<i class='fas fa-play'></i>");
$(".strict").html("Strict<br>Mode");
var strict = false;
$(".strict").click(function() {
if (strict) {
$(this).css("background", "#efefef");
$(this).css("color", "#262626");
strict = true;
} else {
$(this).css("background", "#262626");
$(this).css("color", "#efefef");
strict = true;
}
});
});body {
background: #262626;
height: 100vh;
overflow: hidden;
}
@media (orientation: landscape) {
div.grid.main {
display: grid;
width: 90vh;
height: 90vh;
margin: 5vh auto;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
}
@media (orientation: portrait) {
div.grid.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
width: 90vw;
height: 90vw;
margin: auto;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
}
button {
border: none;
}
.green {
background: #15ff00;
border: 1px solid #11cc00;
grid-area: 1 / 1 / 1 / 3;
}
.green:hover {
z-index: 99;
box-shadow: 0 0 3px 3px #15ff00;
background: #11cc00;
border: none;
}
.green:active {
background: #15ff00;
border: 1px solid #11cc00;
box-shadow: none;
}
.red {
background: #ff0000;
border: 1px solid #cc0000;
grid-area: 1 / 3 / 3 / 3;
}
.red:hover {
z-index: 99;
box-shadow: 0 0 3px 3px #ff0000;
background: #cc0000;
border: none;
}
.red:active {
background: #ff0000;
border: 1px solid #cc0000;
box-shadow: none;
}
.yellow {
background: #fffa00;
border: 1px solid #ccc800;
grid-area: 2 / 1 / 4 / 1;
}
.yellow:hover {
z-index: 99;
box-shadow: 0 0 3px 3px #fffa00;
background: #ccc800;
border: none;
}
.yellow:active {
background: #fffa00;
border: 1px solid #ccc800;
box-shadow: none;
}
.blue {
background: #006eff;
border: 1px solid #0058cc;
grid-area: 3 / 2 / 3 / 4;
}
.blue:hover {
z-index: 99;
box-shadow: 0 0 3px 3px #006eff;
background: #0058cc;
border: none;
}
.blue:active {
background: #006eff;
border: 1px solid #0058cc;
box-shadow: none;
}
.menu {
z-index: -1;
background: #262626;
grid-area: 2 / 2 / 2 / 2;
}
div.grid.menu {
display: grid;
grid-template: 2fr 1fr / repeat(3, 1fr);
}
.header {
grid-area: 1 / 1 / span 1 / span 3;
}
.count {
background: #efefef;
color: #262626;
text-align: center;
font-size: 7vh;
line-height: 8vh;
}
.start {
background: #efefef;
color: #262626;
text-align: center;
font-size: 6vh;
line-height: 6vh;
}
.start:hover {
background: #262626;
color: #efefef;
}
.strict {
background: #efefef;
color: #262626;
text-align: center;
font-size: 4vh;
line-height: 4vh;
}
h1 {
color: #efefef;
font-size: 8vh;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Simon</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div class='grid main'>
<button class='green'></button>
<button class='red'></button>
<button class='yellow'></button>
<button class='blue'></button>
<div class='grid menu'>
<div class='header text-center'></div>
<div class='count'></div>
<button class='start'></button>
<button class='strict'></button>
</div>
</div>
</body>最佳答案
这是一个分层问题..
从 .menu 中删除 z-index
.menu {
/* z-index: -1; REMOVE THIS */
background: #262626;
grid-area: 2 / 2 / 2 / 2;
}
关于javascript - 按钮不响应悬停或单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48845640/