CSS :hover function not working

Question

我正在尝试向我使用 CSS 完成的网页添加图像。问题是我创建了一个显示图像右侧的悬停功能。这确实有效，但是当我添加 position: relative 或 z-index: -1 时，悬停功能不起作用。有什么办法可以解决这个问题而不用去掉 position 或 z-

谢谢

http://jsfiddle.net/L5rvkt2g/

#logo {
        background: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/1875_CC_double_eagle.jpg);
        width: 956px;
        height: 884px;
        background-position: left;
        margin: auto;
        position: relative;
        z-index: -1;
    }

        #logo:hover {
            background-position: right;
        }

Answer 1

问题是关于 z-index: -1; 因为鼠标不能悬停索引低于 0，所以悬停不起作用。删除它，它会很好地工作!