Div mit Hintergrund, Bild nicht anklickbar

Question

Versuchen, ein DIV mit Hintergrundbild und Farbe anklickbar zu machen, aber aus irgendeinem Grund ist das Bild selbst nicht anklickbar, nur die Hintergrundfarbe.

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'); 
}); 

ich beide mit .arrow und # toggle2 für die Onclick Trigger, das gleiche Resultat versucht.

Answer 1

Kann aufgrund des Reputationswerts nicht kommentieren.

Wie können Sie auf .arrow2 klicken, wenn das übergeordnete Element auf display: none gesetzt ist? In diesem Fall können Sie weder .arrow2 noch #toggle2 klicken, Sie können sie nicht einmal beim Laden der Seite sehen.

Möglicherweise möchten Sie #toggle zuerst versteckt werden, nicht #toggle2. Dann funktioniert es https://codepen.io/EvoMedia/pen/WEzRYZ