Divと背景、画像はクリックできません

Question

背景画像と色の両方でDIVを作成しようとしましたが、何らかの理由で画像自体がクリック可能ではなく、背景色のみです。

CSS

.arrow2 { 
    display:inline-block; 
     background: url('toggle2.png') no-repeat center; 
     width: 30px; 
     height: 100%; 
} 


#toggle2 { 
    display: none; 
    background: rgba(40, 40, 40, 0.7); 
    position: absolute; 
    top:10px; 
    width: 30px; 
    height: 50px; 
    background-color: rgba(40, 40, 40, 0.7); 
    cursor: pointer; 
    border-radius: 0px 10px 10px 0px; 
    justify-content:center; 
    align-content:center; 
    flex-direction:column; /* column | row */ 
} 

HTML

<div id="toggle2"><span class="arrow2"></span></div> 

のJavascript（jQueryの）

$('.arrow2').click(function() { 
$('#navigation').toggle('slow'); 
$('#toggle').toggle('show'); 
$('#toggle2').toggle('hide'); 
}); 

私はonclickのトリガ、同じ結果の両方に使用して.arrowと＃toggle2で試してみました。

Answer 1

評判スコアのためにコメントすることはできません。

親がdisplay: noneに設定されている場合、.arrow2をクリックするにはどうすればよいですか？その場合は.arrow2も#toggle2もクリックできません。ページが読み込まれても表示されません。

#toggleを最初に非表示にしたい場合があります。#toggle2ではありません。次に動作しますhttps://codepen.io/EvoMedia/pen/WEzRYZ