Наведите указатель мыши на изображение, измените z-index другого изображения

Question

У меня есть веб-страница с 6 маленькими изображениями и 1 большим изображением в центре (на самом деле это 6 слоев, каждая из которых содержит 1 изображение), например: http://jsbin.com/onujiq/1/; Я установил свойство z-index всех центральных изображений на (-1). То, что я пытаюсь сделать, - это когда я наводил более одного из 6 маленьких изображений, соответственно изображение будет отображаться как большие изображения в центре (например, изменив z-индекс центрального изображения на 5); но как бы я ни старался, это не работает, как я хочу. Пожалуйста, помогите мне с этим (я использую только CSS); заранее спасибо !

PS: еще запутанная проблема, когда я проверить о парении, когда я использую этот код:

#img3:hover + #img4{ 
    opacity: 0.2; 
} 

он делает работу, но когда я использую это:

#img3:hover + #img5{ 
    opacity: 0.2; 
} 

это не так! Я все еще не знаю, что такое большое отличие между # img4 & # img5 ??

Answer 1

http://jsfiddle.net/yy9Rr/

Ваше решение было близко, но вы должны изменить его из

#img3:hover + #img4{ 
    opacity: 0.2; 
} 

использовать ~, чтобы дать что-то вроде

#img3:hover ~ #imgCenter3 { 
    z-index: 10; 
} 

a + b говорит любому b элемент сразу после элемента a

a ~ b говорит любой b элемент, который представляет собой следующий родственный a, не обязательно непосредственно рядом.

Answer 2

Попробуйте использовать JavaScript:

document.getElementById("img3").onmouseover = function() { 
document.getElementById("img4").style.opacity = ".2"; 
document.getElementById("img5").style.opacity = ".2"; 
}