爲什麼onClick無法使用HTML5視頻背景？

Question

我有一個全屏視頻，HTML5。我可以在它上面添加文本，但是文本似乎不能用Firefox上的開發工具選擇（這不是問題本身，但我認爲這可能會導致我的問題）。

我試着添加兩個圖標靜音和取消靜音，並在其上添加一個OnClik事件。我可以看到兩個圖標，但是當我點擊它們時，沒有任何反應。它看起來像我可以選擇圖像，但就是這樣。

你知道爲什麼onclick事件沒有被觸發嗎？

這裏是一個JSBin：http://jsbin.com/sacineniqu/1/edit?html,css,output

我不明白我可能會丟失...

謝謝！

答案：z-index不正確。標頭具有-1 z指數，因此點擊事件未被重新調整。我的問題已修復！謝謝 ！

Answer 1

在此示例中，這是因爲您的.masthead元素（其中圖像正在坐着）設置爲z-index:-1。無論z-index位置如何，任何鼠標與其及其子女的互動都會被z-index:0中的主頁內容阻止。

.masthead{ 
    position: relative; 
    color:#fff; 
    z-index:-1; /* this places your buttons behind everything else */ 
    overflow:hidden; 
} 

將.masthead移動到索引0將會解決它。