html - 将鼠标悬停在一张图片上，更改另一张图片的z-index

我有一个页面，中间有6个小图像和1个大图像（实际上是6层，每个层都包含1个图像），就像这样：http://jsbin.com/onujiq/1/；我将所有中心图像的z-index属性设置为（-1）。我要做的是当我将鼠标悬停在6个小图像中的1个上时，分别的图像将显示为中心的大图像（例如，通过将分别的中心图像的z索引更改为5）；但无论我如何尝试，它都无法按我所需的方式工作。请帮我这个（我只使用CSS）；提前谢谢！
PS:当我测试悬停时，另一个令人困惑的问题是当我使用以下代码时：

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

它确实有效，但当我使用它时：

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

不是的！我还是不知道img4和img5有什么不同？?

最佳答案

http://jsfiddle.net/yy9Rr/
你的解决方案很接近，但是你需要改变它

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

使用~，给出

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

a + b表示紧跟在元素后面的任何元素b
a表示任何a ~ b元素，该元素是b的后续同级元素，不一定立即相邻。