Html CSS悬停伪类和画布交互？

如果您试图将鼠标悬停在左侧的按钮上，则当画布显示时，这些按钮不起作用。如果切换到显示：无；那么悬停就可以了。我完全不明白为什么

下面是包含所有代码的JSFIDLE。有趣的是，它在JSFIDLE中工作，但在chrome、ie或firefox中不工作。

编辑：#openscene是画布ID

模式{
宽度：200px；
背景：#e3；
线高：50px；
文本对齐：居中；
字体大小：粗体；
颜色：#333；
边界半径：5px；
边缘底部：20px；
左边距：22.5px；
过渡：所有400毫秒
}
#开放场景{
背景：黑色；
右边距：250px；
位置：相对位置；
左：235px；
边框顶部：135px实心#CCC；
边框底部：135px实心#CCC；
右边框：10px固体#ccc；
左边框：10px实心#ccc；
}
#左侧包装{
左边距：-250px；
左：250px；
宽度：250px；
背景：#CCC；
位置：固定；
身高：100%；
文本对齐：居中；
显示：块；
}
.模式#一{
边缘顶部：20px；
}
.模式：悬停{
背景：#333；
颜色：#FFFFFF；
光标：指针；
}

25卡定时
50卡定时
25卡4未命中
50卡4未命中

您的

.container fluid

覆盖在左侧菜单上，防止按钮上出现

：悬停

效果

无论如何，我建议最快的调整是将菜单放在上面：

• 添加

  z-index:1至
  #左侧包装

---

另一种方法是使

.container fluid

中的内容少于12列，这是使用左菜单折叠的内容（尝试将

.col-md-12

偏移到

.col-md-10

和

.col-md-offset-2

，您将看到可以再次悬停），但这需要一些类调整

什么是“它在JSIDdle中工作，但在chrome、ie或firefox中不工作”？这意味着当代码在JSIDdle中执行时，hover元素可以正常工作，但如果您只是在浏览器中以实际网页的形式打开它，它就不工作了，但是JSIDdle就像其他网页一样。您在jsfiddle中遗漏的网页中是否有错误？jsfiddle包含了目前完整的网站代码，因此no=（完美，Z-index正是我所寻找的。我忘了我将画布放在容器中，这现在非常合理。谢谢！