CSS：悬停功能不起作用

Question

我正在尝试将图像添加到我使用CSS执行的网页中。问题是我创建了一个显示图像右侧的悬停功能。这确实有效但是当我添加position：relative或z-index：-1时，悬停函数就不起作用了。没有取出位置或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的索引，悬停不起作用。删除它，它将运作良好！

Answer 2

下层不能悬停，因为它被上层覆盖。

假设在公共汽车上，有两个窗口，你坐在那里，你想在窗外握手。一个窗户有玻璃，另一个没有玻璃，没有打开玻璃就不能握手。这意味着上层阻挡了徘徊。

将你的元素带到上方。

Answer 3

您应该从z-index中移除#logo，然后您的代码就像魅力一样。这是working fiddle。这是为了确保您index的{​​{1}} img实际上可以悬停在0上。