Javascript CSS：悬停未应用于某些元素

我遇到了一个奇怪的问题

在某些元素上，未应用

：hover

效果

html，
身体{
身高：100%；
}
身体{
保证金：0；
颜色：#3b3b；
字体系列：tahoma；
字体大小：12px；
背景:#f5；
}
body.toggle{
溢出：隐藏；
}
#主要内容{
身高：100%；
}
#预加载程序内容{
z指数：99999；
位置：绝对位置；
排名：0；
左：0；
背景:#303030；
宽度：100%；
身高：100%；
}
#预加载程序内容>分区{
位置：绝对位置；
宽度：200px；
}
#预载率{
颜色：#fff；
文本阴影：0 1px 1px rgba（0,0,0,0.5）；
字体大小：32px；
字体系列：arial；
字体大小：粗体；
文本对齐：居中；
}
#容器{
填充顶部：80px；
身高：100%；
框大小：边框框；
}
#标题{
位置：固定；
排名：0；
z指数：1；
高度：80px；
最小宽度：600px；
宽度：100%；
框大小：边框框；
}
#移动电话{
身高：100%；
显示：无；
框大小：边框框；
背景:#303030；
颜色：#d9d9d9；
}
#桌面标题{
身高：100%；
左边距：200px；
框大小：边框框；
背景：#fff；
}
#边栏{
位置：固定；
z指数：1；
排名：0；
左：0；
底部：0；
宽度：200px；
背景:#303030；
颜色：#d9d9d9；
框大小：边框框；
}
#边栏.切换{
z指数：0；
显示：块；
}
#标志{
位置：绝对位置；
}
#菜单{
位置：绝对位置；
顶部：80px；
宽度：100%；
底部：0；
溢出y：自动；
}
#主要{
位置：绝对位置；
z指数：-1；
最小宽度：600px；
宽度：100%；
最大宽度：1400px；
左侧填充：200px；
框大小：边框框；
}
.mobile_header_动作{
浮动：对；
}
.mobile_header_actions>div{
显示：内联块；
右边距：20px；
}
.btn\u移动\u标题\u切换{
背景：url（/gfx/btn.mobile\u header\u toggle.png）无重复中心；
光标：指针；
高度：50px；
宽度：50px；
}
.btn\u移动\u标题\u切换.toggle{
背景色：rgba（0,0,0,0.5）；
}
.侧边栏第页，
.侧边栏_子页面_ul{
列表样式：无外无；
保证金：0；
填充：0；
}
.侧边栏{
填充：10px 10px 10px 20px；
字体大小：11px；
颜色：#C2C2；
}
.侧边栏页面{
填充：10px 10px 10px 30px；
字体大小：13px；
字体大小：粗体；
过渡：背景色0.2s至0.0s；
光标：指针；
}
.侧边栏箭头{
背景：url（/gfx/sidebar_arrow.png）没有重复中心；
浮动：对；
高度：18px；
宽度：18px；
}
.sidebar_箭头。激活{
变换：旋转（90度）；
}
.侧边栏_子页面_ul{
显示：无；
}
.sidebar_子页面_ul.active{
显示：块；
}
.sidebar_子页面{
填充：10px 10px 10px 30px；
背景色：rgba（0,0,0,0.35）；
字体大小：13px；
过渡：背景色0.2s至0.0s；
光标：指针；
不透明度：0；
}
.sidebar_page.active，
.侧边栏页面：悬停，
.sidebar_子页面处于活动状态，
.sidebar_子页面：悬停{
背景色：rgba（0,0,0,0.2）；
颜色：#fff；
}
@介质（最大宽度：767px）{
#容器{
填充顶部：50px；
}
#标题{
高度：50px；
}
#移动电话{
显示：块；
}
#桌面标题{
显示：无；
}
#边栏{
显示：无；
}
#菜单{
顶部：50px；
}
#主要{
左侧填充：0；
}
}
@介质（最小宽度：768px）{
#边栏{
宽度：200px！重要；
}
#主要{
左：0！重要；
}
}
@介质（最小宽度：992px）{}@media（最小宽度：1200px）{}按钮{
背景：线性梯度（#f5，
#f1f1）；
边框：1px实心rgba（0，
0,
0,
0.1);
框大小：内容框；
边界半径：2px；
显示：内联块；
最小宽度：50px；
颜色：#444；
字体大小：11px；
字体大小：粗体；
填充：4px 8px 5px 8px；
文本对齐：居中；
过渡：所有300毫秒和0秒；
利润率：0.6px 0.0；
光标：指针；
}
按钮：悬停{
背景：线性梯度（#f8f8，#f1f1）；
边框颜色：#C6；
长方体阴影：0 1px 1px rgba（0,0,0,0.1）；
颜色：#222；
}
巴顿{
背景：线性梯度（#4d90fe，#4787ed）；
边框：1px实心#3079ed；
颜色：#fff；
}
按钮。cta：悬停{
背景：线性梯度（#4d90fe，357ae8）；
边框颜色：#2f5bb7；
}

移动报头
注销
标题桌面
注销
标志


账户


概述


簿记


比拉格


达格利格




会计科目表


管理


客户


账户


账户
测验
测验

这是因为

#main

样式具有

z-index:-1

。这将它放在容器元素后面。

这是因为

#main

样式具有

z-index:-1

。这将它放置在容器元素后面。

您有

#主{
位置：绝对位置；
z指数：-1；
}

#main

的父级，

#container

不会创建任何堆叠上下文（因为它具有默认的

不透明度

，并且不是与

自动

不同的

z索引的定位元素）。因此，
#main
和
#container
属于相同的堆叠上下文

然后，由于
#main
是具有负堆栈级别的堆栈上下文，因此它将显示在
#container
的背景下（在z轴中）。T