Html CSS按钮悬停不'；不能与背景色配合使用

我正在尝试使用一些按钮悬停效果，如下所示：

现在我卡住了，因为当我在div#菜单上使用

背景色时，按钮悬停效果不起作用

有人能解释一下我做错了什么吗

    <div id="wrapper">
        <div id="header">
        </div>
        <div id="gradient">
        </div>
        <div id="menu">
            <a href="index.html" class="btn btn-4"><span>Startseite</span></a>
        </div>
        <div id="gradient2">
        </div>
        <div id="content">
            <div id="innerContent">
            </div>
        </div>
        <div id="footer">
            <div id="copyright"></div>
        <div>
    </div>

jsiddle:
您有。btn-4:在选择器之后

z-index: -10;

删除它，好的效果会再次发挥作用
试着将你的示例简化为重现问题所需的代码，并澄清到底什么不起作用……目前还不太清楚，Mac Chrome中有一个悬停效果。同意Paulie_D的观点，您可以指定预期的行为和问题吗？如果您查看此JSFIDLE并在“StartSite”链接上移动鼠标，您将看到悬停效果。此链接位于div“menu”中，此div需要获得背景色。因此，如果您取消对#menu{/*background color:#fff；*/}上的css代码的注释，效果就不再有效了。非常感谢。但是你能解释一下为什么吗？我不明白。@Mike我猜z-index-10只是让红色条纹在背景下运行。要理解我的意思，请尝试使用半透明背景，如rgba（0,0,0,4）
z-index: -10;