Div與背景，圖像不可點擊

試圖使背景圖像和顏色可點擊的DIV，但由於某些原因，圖像本身不可點擊，只有背景顏色。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'); 
});

我試圖與這兩個使用.arrow和＃toggle2爲的onclick觸發，同樣的結果。

來源

2017-08-20 Patrik BoXon Nicklasson

由於信譽評分而無法評論。

如果父母的設置爲display: none，如何點擊.arrow2？在這種情況下，您不能單擊.arrow2和#toggle2也不能在頁面加載中看到它們。

可能是你想#toggle首先隱藏，而不是#toggle2。然後它的工作原理https://codepen.io/EvoMedia/pen/WEzRYZ

來源

2017-08-20 15:42:11

這些elemts默認是隱藏的，顯示它們的代碼在我的例子中是不可見的。不要理會顯示：Toggle2中沒有，因爲它在jQuery中被切換。 –

然後問題不在提供的片段中，轉到我的鏈接並查看，切換到任何地方。 –

@AzamatRasulov我在您的說明中看不到任何鏈接。你可以發佈一個jsfiddle嗎？ –

Div與背景，圖像不可點擊

回答

相關問題