CSS: функция зависания не работает

Question

Я пытаюсь добавить изображение на веб-страницу, которую я использовал для CSS. Проблема в том, что я создал функцию зависания, которая показывает правую часть изображения. Это работает, но когда я добавляю позицию: 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 вашего img был 0, вы можете фактически навестить на #logo.