CSS悬停伪类和画布交互？

问题描述：

如果您尝试将鼠标悬停在左侧的按钮上，则在显示画布时不起作用。如果切换到显示：无;那么悬停工作正常。我不明白为什么。CSS悬停伪类和画布交互？

下面是带有所有代码的jsfiddle。有趣的是，它可以在jsfiddle中运行，但它不适用于Chrome，即Firefox。 https://jsfiddle.net/9nc22xuy/

编辑：#openscene是画布ID

.mode{ 
 
    width:200px; 
 
    background:#e3e3e3; 
 
    line-height: 50px; 
 
    text-align:center; 
 
    font-weight:bold; 
 
    color: #333; 
 
    border-radius:5px; 
 
    margin-bottom:20px; 
 
    margin-left:22.5px; 
 
    transition: all 400ms 
 
} 
 

 
#openscene{ 
 
    background:black; 
 
    margin-right:250px; 
 

 
    position:relative; 
 
    left:235px; 
 
    border-top:135px solid #CCC; 
 
    border-bottom:135px solid #CCC; 
 
    border-right:10px solid #ccc; 
 
    border-left:10px solid #ccc; 
 

 

 
} 
 

 
#left-side-wrapper { 
 
    margin-left: -250px; 
 
    left: 250px; 
 
    width: 250px; 
 
    background: #CCC; 
 
    position: fixed; 
 
    height: 100%; 
 
    text-align: center; 
 
    display:block; 
 
    
 
} 
 

 
.mode#one{ 
 
    margin-top:20px; 
 
} 
 

 
.mode:hover { 
 
    background:#333; 
 
    color:#FFFFFF; 
 
    cursor:pointer; 
 
}

<div id="button-wrapper"> 
 
    <div class="mode" id="one">25 Card Timed</div> 
 
    \t 
 
    <div class="mode" id="two">50 Card Timed</div> 
 

 
    <div class="mode" id="three">25 Card 4 Miss</div> 
 

 
    <div class="mode" id="four">50 Card 4 Miss</div> 
 
</div>

什么是“它在jsfiddle工作，但它不工作在铬，即火狐”？ –

在jsfiddle中执行代码时的含义悬停元素可以正常工作，但如果您只是在浏览器中将其作为实际网页打开，它不会 – Purgedmoon

但是，但jsfiddle与其他网页一样。你在jsfiddle网页中遗漏的网页有错误吗？ –

答

你.container-fluid覆盖在左边的菜单，并防止对按钮:hover效果。

不管怎么说，我会建议作为发展最快的调整将放置上面的菜单：

添加z-index: 1;到#left-side-wrapper。

另一个将作出.container-fluid小于12列里面的内容是与左边的菜单是什么崩溃（试图抵消该.col-md-12到和.col-md-offset-2，你会看到，你可以再次悬停），但它需要几班调整。

完美，Z-index正是我正在寻找的东西，我忘了我把帆布放在容器里面，现在非常合理，谢谢！ – Purgedmoon

CSS悬停伪类和画布交互？

相关推荐