将鼠标悬停在图像上，更改另一个图像的z-index

Question

我有一个网页，中间有6张小图片和1张大图片（实际上是6层，每层包含1张图片），就像这样：http://jsbin.com/onujiq/1/;我已将所有中心图像的z-index属性设置为（-1）。我要做的是当我将鼠标悬停在6个小图像中的1个上时，相应的图像将显示为中心的大图像（例如，将相应的中心图像的z-index更改为5）;但无论我如何尝试，它都不能像我想要的那样工作。请帮帮我（我只使用CSS）;提前谢谢你！

PS：当我测试悬停时，另一个令人困惑的问题是我使用此代码：

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

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

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

它没有！我还是不知道＃img4＆amp; amp; ＃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";
}