为什么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将会解决它。