CSSホバー擬似クラスとキャンバスの相互作用？

Question

左側のボタンにカーソルを合わせようとすると、キャンバスが表示されても機能しません。 display：noneに切り替えると、ホバーはうまく動作します。なぜ私は理解できません。

ここではすべてのコードを含むjsfiddleです。面白いことに、それはjsfiddleで動作しますが、クローム、すなわち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>

Answer 1

あなた.container-fluidは、左のメニューをオーバーレイし、ボタンの:hover影響を防ぐことができます。

とにかく、私は最速の微調整としてお勧めしたいものを上記のメニューを配置するために、次のようになります。

• が#left-side-wrapperにz-index: 1;を追加します。

別は、左のメニューで崩壊するものである.container-fluid 12未満の列内のコンテンツを作成することになる（相殺しようとしている.col-md-12 へと.col-md-offset-2、あなたが再び置くことができます表示されます）が、それはいくつかのクラスを必要とします微調整。