Javascript 不响应悬停或单击的按钮

使用CSS网格，我在网格中有按钮和一个div。该div也是一个包含更多按钮和div的网格。主网格中的按钮工作正常，但子网格中的按钮不会响应单击或悬停事件。我有一个CSS伪选择器使颜色在悬停的开始按钮上反转，但它不起作用，我有一个jQuery选择器使严格模式按钮在单击时反转颜色，并在第二次单击时反转回来，但它也不起作用

$（文档）.ready（函数（）{
$（“.header”）.html（“Simon”）；
$（“.count”）.html（“-”）；
$（“.start”）.html（“”）；
$（“.strict”）.html（“strict
模式”）；
var-strict=false；
$（“.strict”）。单击（函数（）{
如果（严格）{
$（this.css（“背景”和“#efefef”）；
$（this.css（“color”和“#262626”）；
严格=正确；
}否则{
$（this.css（“背景”，“#262626”）；
$（this.css（“color”，“#efefef”）；
严格=正确；
}
});
});
正文{
背景：#262626；
高度：100vh；
溢出：隐藏；
}
@媒体（方向：景观）{
主网格分区{
显示：网格；
宽度：90vh；
高度：90vh；
保证金：5vh自动；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
}
@媒体（方向：纵向）{
主网格分区{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
显示：网格；
宽度：90vw；
高度：90vw；
保证金：自动；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
}
钮扣{
边界：无；
}
格林先生{
背景：#15ff00；
边框：1px实心#11cc00；
网格面积：1/1/1/3；
}
.格林：悬停{
z指数：99；
盒影：0 0 3px 3px#15ff00；
背景：#11cc00；
边界：无；
}
.green:活动{
背景：#15ff00；
边框：1px实心#11cc00；
盒影：无；
}
瑞德先生{
背景：#ff0000；
边框：1px实心#cc0000；
网格面积：1/3/3/3；
}
红色：悬停{
z指数：99；
盒影：0 0 3px 3px#ff0000；
背景：#cc0000；
边界：无；
}
.红色：活动{
背景：#ff0000；
边框：1px实心#cc0000；
盒影：无；
}
黄先生{
背景#fffa00；
边框：1px实心#ccc800；
网格面积：2/1/4/1；
}
黄色：悬停{
z指数：99；
盒影：0 0 3px 3px#fffa00；
背景：#ccc800；
边界：无；
}
.黄色：活动{
背景#fffa00；
边框：1px实心#ccc800；
盒影：无；
}
蓝先生{
背景#006eff；
边框：1px实心#0058cc；
网格面积：3/2/3/4；
}
蓝色：悬停{
z指数：99；
盒影：0 0 3px 3px#006eff；
背景#0058cc；
边界：无；
}
.蓝色：活动{
背景#006eff；
边框：1px实心#0058cc；
盒影：无；
}
.菜单{
z指数：-1；
背景：#262626；
网格面积：2/2/2/2；
}
div.grid.menu{
显示：网格；
网格模板：2fr 1fr/重复（3，1fr）；
}
.标题{
网格面积：1/1/span 1/span 3；
}
.伯爵{
背景：#efef；
颜色：#262626；
文本对齐：居中；
字体大小：7vh；
线路高度：8vh；
}
.开始{
背景：#efef；
颜色：#262626；
文本对齐：居中；
字体大小：6vh；
线路高度：6vh；
}
.开始：悬停{
背景：#262626；
颜色：#efefef；
}
.严格的{
背景：#efef；
颜色：#262626；
文本对齐：居中；
字体大小：4vh；
线路高度：4vh；
}
h1{
颜色：#efefef；
字号：8vh；
文本对齐：居中；
}

西蒙
这是一个分层问题

从
菜单中删除
z索引

.menu {
  /* z-index: -1; REMOVE THIS */
  background: #262626;
  grid-area: 2 / 2 / 2 / 2;
}

这是一个分层问题

从
菜单中删除
z索引

.menu {
  /* z-index: -1; REMOVE THIS */
  background: #262626;
  grid-area: 2 / 2 / 2 / 2;
}

CSS:

类
.menu
具有
z索引：-1什么使它不可点击，因为它位于所有其他元素之下

jQuery:

变量
strict
设置为
true
两次，因此只能执行一次单击。（如果需要，就让它这样吧）


片段：


$（文档）.ready（函数（）{
$（“.header”）.html（“Simon”）；
$（“.count”）.html（“-”）；
$（“.start”）.html（“”）；
$（“.strict”）.html（“strict
模式”）；
var-strict=false；
$（“.strict”）。单击（函数（）{
如果（严格）{
$（this.css（“背景”和“#efefef”）；
$（this.css（“color”和“#262626”）；
严格=错误；
}否则{
$（this.css（“背景”，“#262626”）；
$（this.css（“color”，“#efefef”）；
严格=正确；
}
});
});
正文{
背景：#262626；
高度：100vh；
溢出：隐藏；
}
@媒体（方向：景观）{
主网格分区{
显示：网格；
宽度：90vh；
高度：90vh；
保证金：5vh自动；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
}
@媒体（方向：纵向）{
主网格分区{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
显示：网格；
宽度：90vw；
高度：90vw；
保证金：自动；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
}
钮扣{
边界：无；
}
格林先生{
背景：#15ff00；
边框：1px实心#11cc00；
网格面积：1/1/1/3；
}
.格林：悬停{
z指数：99；
盒影：0 0 3px 3px#15ff00；
背景：#11cc00；
边界：无；
}
.green:活动{
背景：#15ff00；
边框：1px实心#11cc00；
盒影：无；
}
瑞德先生{
背景：#ff0000；
边框：1px实心#cc0000；
网格面积：1/3/3/3；
}
红色：悬停{
z指数：99；
盒影：0 0 3px 3px#ff0000；
背景：#cc0000；
边界：无；
}
.红色：活动{
背景：#ff0000；
边框：1px实心#cc0000；
盒影：无；
}
黄先生{
背景#fffa00；
边框：1px实心#ccc800；
网格面积：2/1/4/1；
}
黄色：悬停{
z指数：99；
盒影：0 0 3px 3px#fffa00；
背景：#ccc800；
边界：无；
}
.黄色：活动{
背景#fffa00；
边框：1px实心#ccc800；
盒影：无；
}
蓝先生{
背景#006eff；
边框：1px实心#0058cc；
G